Table of Contents

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.
Rendered by WebCode

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:
Rendered by WebCode

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.
Rendered by WebCode