Question

我有3个元素，#app，#main-section位于#app内，#magazine-detail位于#main-section内。当#magazine-detail设置为position：relative时，如何在#magazine-section内定位#app;并且#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。我试图用位置定位它：绝对像建议做的那样，如下：

#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是绝对的。问题是，如果你设置magazine-detail绝对值，那么在css中，它将相对于main-section定位。

以下是工作样本：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个：

#app {
    position: relative;
    height: 100%;
    width: 100%;
  border:1px solid #eee;
}

#main-section {
    position: absolute;
    top: 77px;
    left: 0;
    width: 100%;
    height:400px;
    border:1px solid #ccc;
}

#magazine-detail {
  position: absolute;
  border:1px solid #ff0000;
  width:400px;
  bottom:30px;
}

HTML：

<div id="app">  
    <div id="main-section">  
      <div id="magazine-detail">
      This is the test<br>
        This is the test<br>
        This is the test<br>
        This is the test<br>
        This is the test
      </div>
    </div>
</div>

位置绝对位置是根据父容器位置的元素，因此为了使您的＃main-section 和＃magazine-detail < / strong> 绝对位置， #app 应相对。

位置元素位于绝对位置

2 个答案: