CSS - Absolute Positioning (Relative / Absolute / Fixed > Absolute or Static > Absolute )

About

absolute positioning is a positioning model that occurs when a box has the absolute value as position property.

When this is the case, the absolute box is positioned:

Absolutely positioned elements are not in (removed from) the normal flow, and thus their dimensions does not alter the dimensions of their parents.

When a box has position: absolute its containing box is the parent's padding box. (the box around its padding).

It means that the width of the absolute positioned element is at maximum: the width of the containing box minus the padding of the containing box.

Control Button Example

This example shows a slideshow where we position the next and previous button absolutely over a slide

  • The html with the component that has a main part and a controls part that holds two control buttons.
<div id="component">
    <div id="main">
        <div>A slide</div>
    </div>
   <div id="controls">
      <button class="left">Left</button>
      <button class="right">right</button>
  </div>
</div>
#component {   
   position: relative; 
}
  • The main content of the component got:
    • width and height dimensions
    • and a internal grid layout
#main { /* The main box is the driver that calculates the dimension */
   width:100%;
   height:10rem;
   display: grid;
   place-items: center;
   background-color: skyblue;
}
  • The dimension of the box with the control id are inherited by the parent (ie by the component)
#controls {
   box-sizing: inherit; /* same width and height than the parent box */
}
  • Finally, we set the button to be in the middle vertically and on the left and right of the parent
.left {
  position: absolute;
  left: 2rem;
  top: 50%;
}
.right {
  position: absolute;
  right: 2rem;
  top: 50%;
}
  • The output where you can see that the button are relatively located at the right and left side of the slide.

Position value of a ascendant container box

An absolute box will be positioned in two cases:

Relative / Absolute / Fixed

When a box has the value absolute, its position is calculated with the offset properties (left, right, bottom, top) from the first ascendant container box with a position value of relative, absolute or fixed (This box is called the containing block)

Example: Bottom Right of a relative container

  • Below is the CSS of the container box (that we call the ancestor) that we have set to relative. All descendant element that are absolute will then have their position calculated from this container.
.box_ancestor_relative {
    position:relative; /* from static to relative */
    width: 600px; height:300px; /* a size */
    border: 2px solid steelblue; /* a border to see the box */
    padding: 1rem /* padding to have the text not touching the border */
}
  • Below is the CSS of an descendant box with an absolute position. Its position will be based / calculated from its the first relative containing box (ie ancestor box)
.box_descendant_absolute {
    position:absolute;
    border: 2px solid red; /* A border to se the box */
    margin: 0px; /* margin to 0 to have the border touching the ascendant border */
    padding: 1rem; /* padding to have the text not touching the border */
    bottom:0; right:0; /* bottom right position of the first relative ascendant box */
    width: 200px /* we restrict the width to see the bottom right (otherwise the box takes the whole width due to the content ) */
}
  • The HTML with:
    • at the top the relative ancestor box
    • an intermediate div box to show that this box has no effect on the position of the absolute descendant box
    • the descendant absolute box
<div class="box_ancestor_relative">
Container Box with a Relative position
    <div style="border:2px dotted steelblue;padding:1rem"> 
        <p>This div has no effect on its descendant absolute box because it has a position value of static (the default)<p>
        <p class="box_descendant_absolute">Descendant Box with a absolute position from the first relative ancestor box - Bottom Right</p>
    </div>
</div>
  • The result:

Only static ascendants

When the box with a absolute position does not have any ascendant box with a a relative / absolute or fixed position (ie they are only static), the containing block is the viewport (ie from where the offset properties (left, right, bottom, top) applies)

Example: Bottom Right of the viewport

  • The below CSS rule is for the body and gives more height to the body than the iframe to enable scrolling and see the effect of absolute when we scroll.
body {
    /* position: static; default and therefore not needed */
    border: 2px solid steelblue; /* To visualize the box */
    padding: 1rem; /* ti have the text not touching the border */
    height: 300px
}
  • This css rule makes the box absolute, position the box bottom right and paint a border.
.absolute_box {
    position:absolute;
    border: 2px solid red;
    margin: 0px;
    bottom:0;
    right:0;
}
  • The HTML that mixes the absolute box with only static ascendant box
<p>A text in a body bigger than the viewport (this iframe has a height of 150px and the body is 300). <p>
<p>It helps to see the effect on the absolute box if you scroll down. If you scroll down, the absolute box will also move, if you don't want this behavior, use the ''fixed'' position.</p>

<p class="absolute_box">Absolute Box - Bottom Right of the viewport</p>

</div>
  • The result If you don't want that the absolute box moves while scrolling, you need to use the fixed position.





Discover More
CSS - (Box) Positioning (Scheme)

CSS This section is all how boxes are positioned / laid out on the page. boxcontent (text, image) a box located at the right side and its content at the left side a box taking the whole width...
CSS - Block Box Layout

CSS - Block Box Layout CSS Block are box that can be seen as stacked element (such as paragraphs, section, ...) Block boxes: * create a block formatting context (layout) * and are involved in any...
CSS - Bottom Property

The bottom property is the offset from the bottom edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticleftnormal flow positioning model ...
CSS - Fixed Positioning (Anchored viewport positioning)

fixed positioning is a positioning scheme where the offsets (coordinates) are calculated relative to an anchored viewport. (ie the visible part of the window, an iframe, ..). anchored means that scrolling...
Grid Form With Horizontal Vertical Alignment
CSS - Grid

grid is a CSS layout system that provides a mechanism: to divide the available space into columns and rows (two-dimensional grid) to position into one or more intersections an html element (known...
CSS - Image

The image type in CSS is given: a url that specifies: binary / raster image formats (such as gif, jpeg, etc) dedicated markup formats (such as SVG) or a gradient function (such as linear-gradient...
CSS - Left property explained as 1, 2, 3

The left property is an offset from the left edge of the containing block. This article shows you in two simple rules how to determine the containing block.
CSS - Position - Offset Properties (Left, Right, Top, Bottom)

The Offset CSS Properties of a box are top, left, right, bottom They are applied to the containing box in the following positioning model in order to position a box. relative absolute...
CSS - Position Property

The position property specifies the positioning algorithms (positioning scheme) for elements. The position is calculated with respect to the edges of a rectangular box called the containing block. ...
CSS - Right Property

The right property is the offset from the right edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticrightnormal flow positioning model ...



Share this page:
Follow us:
Task Runner