代码之家 › 专栏 › 技术社区 › 3D-kreativ

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

html5 css html

-1

3D-kreativ · 技术社区 · 7 年前

我只是想知道为什么带有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>

2 回复 | 直到 7 年前

1

0

HyperTextCoffeePot 7 年前

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

Using position:absolute while keeping it inside the document flow

2

0

Tyler Roper 7 年前

如果让父元素确定其自身的高度,它将忽略绝对定位的子元素。你的 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>