时间戳

首页 > 解决方案 > 使用具有绝对位置的其他 div 时，div 的顺序不正确

css - 使用具有绝对位置的其他 div 时，div 的顺序不正确

问题描述

我只是想知道为什么带有 CLASS =“optionsArea-1”的 div 位于顶部，而我认为它应该位于 ID =“configContainer”的 div 下方？我知道部分原因，这是因为位置相对/绝对，但为什么它会那样做，为什么我没有得到 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>

标签： csshtml

解决方案

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

absolute
元素从正常的文档流中移除，并且在页面布局中不为元素创建空间。

位置 - CSS：层叠样式表 | 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>

推荐阅读