{"id":5943,"date":"2024-04-14T20:03:08","date_gmt":"2024-04-14T12:03:08","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5943"},"modified":"2024-04-14T20:03:08","modified_gmt":"2024-04-14T12:03:08","slug":"css-positioning-attributes","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/css-positioning-attributes\/","title":{"rendered":"CSS positioning attributes"},"content":{"rendered":"\n
\n

Exploring the following topics:<\/strong><\/p>\n

    \n
  1. Place regulation<\/li>\n
  2. Corresponding positioning<\/li>\n
  3. Exact positioning<\/li>\n
  4. Unchanging positioning<\/li>\n
  5. Attached positioning<\/li>\n
  6. Control over positions and attributes<\/li>\n
  7. Floating setups<\/li>\n
  8. Clarification settings<\/li>\n<\/ol>\n

    The location attribute decides an element\u2019s placement on the page. Once you establish an element’s position, you can tweak the top, bottom, left, and right attributes.<\/p>\n

    Place regulation<\/h2>\n

    Every element has a fixed placement by default, so the element will hold onto the document flow. Elements with fixed positioning display in the sequence they\u2019re stacked. Without added styling, they won’t overlap, and various elements won’t possess different default principles. The sole motive to define an element as fixed is to eliminate the applied positioning.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    Corresponding positioning<\/h2>\n

    An element configured as corresponding is placed in relation to its typical position. A corresponding setting without additional placement attributes included (top, left, bottom, or right) won’t be altered. This is because it\u2019s in relation to itself precisely as if you maintained it as fixed. Defining the top, right, bottom, and left properties of a corresponding element will shift it from its ordinary position. Different content won’t adapt to fit inside any gap left by the element.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    An element with corresponding positioning can overlap other elements without impacting their placement or obstructing the standard document flow.<\/p>\n

    A couple of other things transpire when you employ corresponding location on an element:<\/p>\n

      \n
    1. It initiates the utilization of z-axis on that element. This doesn\u2019t function with fixed elements. Even if you don\u2019t establish a z-axis value, this element will still emerge above any other fixed element it intervenes with. The z-axis is accessible for any element not designated as fixed.\u00a0<\/li>\n
    2. It confines utterly positioned child elements. Any element that functions as a child of a corresponding element, or any placement distinct from fixed, can be precisely positioned within that element.\u00a0<\/li>\n<\/ol>\n

      Expand your understanding about applying a z-axis value.<\/p>\n

      Exact positioning<\/h2>\n

      To displace an element from the standard document flow, exact placement is a terrific choice. The position of an exact element isn\u2019t influenced by other elements and doesn\u2019t impact the placement of other elements.\u00a0<\/p>\n

      \n
      <\/div>\n<\/figure>\n

      By default, the placement of the element is in relation to the body element, but you can position any exact element inside an element if that parent is designated as anything aside from fixed.<\/p>\n

      Leverage the placement attributes top, left, bottom, and right to establish the position \u2014 these values will be with respect to the nearest parent element with configurations differing from fixed.<\/p>\n

      Unchanging positioning<\/h2>\n

      Unchanging elements are placed in relation to the viewport or the browser window.<\/p>\n

      \n
      <\/div>\n<\/figure>\n

      During page scrolling, unchanging elements remain fixed in their positions. This positioning choice is frequently utilized for stable navigations.<\/p>\n

      Attached positioning<\/h2>\n

      Attached elements will interchange between corresponding and unchanging positioning based on the viewer\u2019s scrolling position.<\/p>\n

      \n
      <\/div>\n<\/figure>\n

      An attached element is in relation to the document flow until a defined scroll level is reached. At that moment, it switches to the behavior of an unchanging element within its immediate parent. Once the attached element reaches the base of its parent, it will cease scrolling.<\/p>\n

      You need to specify at least one placement value for the top, bottom, left, or right side for attached positioning to function. Location attached might not function accurately if any parent element has an established height or overflow designated as hidden, scroll, or auto.<\/p>\n

      There are some browsers that don\u2019t endorse attached positioning. Check which browsers endorse position attached<\/a>.<\/p>\n

      Placement controls and values<\/h2>\n

      For corresponding, exact, unchanging, and attached placement attributes, you have the following controls in the Style panel:<\/p>\n