html - 绝对位置内的位置元素

Question

我有 3 个元素，#app、#main-section 位于 #app 和 #magazine-detail 位于 #main-section 内。 当 #app 设置为 position: relative 时，如何将 #magazine-detail 放置在 #magazine-section 内；并且 #magazine-detail 设置为 position: absolute;?

这是CSS:

#app {
  position: relative;
  height: 100%;
  width: 100%;
}

#main-section {
  position: absolute;
  top: 77px;
  left: 0;
  width: 100%;
}

整个 html 太大了，所以我只发布了一个简短的版本，希望你能看到图片:

<div id="app">

   ...
    <div id="main-section">
        ...
        <div id="main-section">
         ...
        </div>
    </div>

 </div>

我需要将 #magazine-detail 30px 放在 main section 底部。 我试过用 position: absolute 来定位它，就像建议的那样:

#magazine-detail {
  position: absolute;
  bottom: 30px;
}

但是元素以某种方式位于距顶部而不是底部 30px 的位置？

Answer 1

我猜下面是你的 html

<div id="app">  
    <div id="main-section">  
      <div id="magazine-detail"></div>
    </div>
</div>

您的#app 是相对的，而main-section 相对于app 是绝对的。问题是在 css 中，如果您也将 magazine-detail 设置为绝对，它将相对于 main-section 定位。

下面是一个工作示例:

#app {
  position: relative;
  height: 400px;
  width: 200px;
  padding: 5px;  
  border: 2px solid red;
}
#main-section {
  position: absolute;
  height: 80%;
  width: 80%;
  padding: 5px;  
  border: 1px solid black;
  top: 15px;
  left: 15px

}
#magazine-detail {
  position: absolute;
  width: 50%;
  height: 50%;
  border: 1px dotted green;      
  bottom: 30px;
}

<div id="app">
  <div id="main-section">
    <div id="magazine-detail"></div>
  </div>
</div>