Question

我只是想知道为什么带有CLASS =“optionsArea-1”的div在顶部，当我认为它应该低于div = ID =“configContainer”？我知道部分为什么，这是因为位置相对/绝对，但为什么它就像那样，为什么我不能得到共同的div流？

段：

#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>

Answer 1

绝对定位完全打破了DOM中这些元素的流动。

Using position:absolute while keeping it inside the document flow

Answer 2

当剩下父元素来确定它自己的高度时，它将忽略绝对定位的子元素。您的configContainer有两个孩子，两个都是绝对定位的，因此其高度计算为0px。

<强>绝对
该元素将从普通文档流中删除，并且不会为页面布局中的元素创建空间。

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

解决方案1：手动设置父级的高度。最简单，但可能是最不可扩展的。这里显而易见的警告是，如果事情四处移动，你可能会在同样的情况下回归。

#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>

解决方案2：在图像编辑器中合并图像。如果您能够将图像合并为一个而不是以编程方式对它们进行分层，则可以完全避免position: absolute;，并且父母将计算预期的身高。

#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时，div的顺序不正确

2 个答案: