div not in correct order when use of other div with position absolute

Question

I just wonder why the div with the CLASS = "optionsArea-1" is in the top, when I thought it should be below the div with the ID = "configContainer"? I know in part why and it's because of the position relative/absolute, but why does it act like that and why do I not get the common flow of divs?

Snippet:

#mainContainer {
  margin: 0 auto;
  width: 1000px;
  height: auto;
}

#innerContainer {
  width: 100%;
  height: 100%;
}

#configContainer {
  position: relative;
  width: 100%;
  height: auto;
}

.optionsArea-1 {
  height: 100px;
}

.optionsArea-2 {
  height: 100px;
}

.layer-1 {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
}

.layer-2 {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
}

<body>

  <div id="mainContainer">

    <div id="innerContainer">

      <div id="configContainer">

        <div class="layer-1">
          <img src="http://via.placeholder.com/100x000" alt="">
        </div>

        <div class="layer-2">
          <img src="http://via.placeholder.com/100x100" alt="">
        </div>

      </div>

      <div class="optionsArea-1">

        <div class="optionsMenu-1">

          <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
          </ul>

        </div>

      </div>

    </div>

  </div>

</body>

When the position is absolute the position of element starts from parent container or its height or width, but when it's relative it gets positioned based on other elements and in order how it is defined. — MJN, Jun 13 '18 at 20:49
@TylerRoper I gave the configContainer a height of 600px, then it looked better. I guess there is not any other options than this if I want to use absolute positions? — 3D-kreativ, Jun 13 '18 at 21:03
If you want to use absolute positions, there aren't really any other options. However, perhaps you could benefit by taking one step back - why do you *need* absolute positions? I've answered with an alternative solution as well, but not sure it will be helpful as the use-case wasn't provided. — Tyler Roper, Jun 13 '18 at 22:07

score 0 · Answer 1 · answered Jun 13 '18 at 20:53

0

Absolute positioning completely breaks the flow of those elements from the DOM.

Using position:absolute while keeping it inside the document flow

answered Jun 13 '18 at 20:53

HyperTextCoffeePot

406
3
14

Tyler Roper · Answer 2 · 2018-06-13T22:12:09.343

When a parent element is left to determine its own height, it will ignore absolutely-positioned children. Your configContainer has two children, both absolutely-positioned, therefore its height is calculated as 0px.

absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout.

^{^{position - CSS: Cascading Style Sheets | MDN}}

Solution 1: Set the height of the parent manually. The easiest, but probably the least extensible. The obvious caveat here is that if things move around, you could end up back in the same situation.

#mainContainer {
  margin: 0 auto;
  width: 1000px;
  height: auto;
}

#innerContainer {
  width: 100%;
  height: 100%;
}

#configContainer {
  position: relative;
  width: 100%;
  height: 100px;
}

.optionsArea-1 {
  height: 100px;
}

.optionsArea-2 {
  height: 100px;
}

.layer-1 {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
}

.layer-2 {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
}

<body>

  <div id="mainContainer">

    <div id="innerContainer">

      <div id="configContainer">

        <div class="layer-1">
          <img src="http://via.placeholder.com/100x100" alt="">
        </div>

        <div class="layer-2">
          <img src="http://via.placeholder.com/100x100" alt="">
        </div>

      </div>

      <div class="optionsArea-1">

        <div class="optionsMenu-1">

          <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
          </ul>

        </div>

      </div>

    </div>

  </div>

</body>

Solution 2: Combine the images in an image editor. If you're able to combine the images into one instead of layering them programatically, you could avoid position: absolute; altogether, and your parent would calculate the expected height.

#mainContainer {
  margin: 0 auto;
  width: 1000px;
  height: auto;
}

#innerContainer {
  width: 100%;
  height: 100%;
}

#configContainer {
  position: relative;
  width: 100%;
}

.optionsArea-1 {
  height: 100px;
}

.optionsArea-2 {
  height: 100px;
}

.layer-1 {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
}

.layer-2 {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
}

<body>

  <div id="mainContainer">

    <div id="innerContainer">

      <div id="configContainer">
          <img src="http://via.placeholder.com/100x100" alt="">
      </div>

      <div class="optionsArea-1">

        <div class="optionsMenu-1">

          <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
          </ul>

        </div>

      </div>

    </div>

  </div>

</body>

div not in correct order when use of other div with position absolute

2 Answers2