继承绝对的位置

Question

＆＃13;

＆＃13;

.Wrap
{
  height:500px;
  width:500px;
  border:2px solid #000;
 }
.container
{
  margin-left:100px;
  margin-top:100px;
  width:300px;
  height:300px;
  background-color:grey;
  }
.box
{
  width:50px;
  height:50px;
  background-color:red;
  position:absolute;
  top:15px;
  left:15px;

＆＃13;

<div class="Wrap">
   <div class="container">
     <div class="box">
      </div>
     </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

class="box"可能只是孩子class="container"吗？我的意思是继承位置绝对来自＆＃34; container＆＃34;但没有来自＆＃34; Wrap＆＃34;。

Answer 1

要将box相对于container定位，请在position: relative;上设置container，或者如下例所示，删除left / top

上的box

请注意，移除left / top可能会产生一些不可预测的结果，因为您可以让浏览器解释如何定位box。

.Wrap {
  height: 500px;
  width: 500px;
  border: 2px solid #000;
}
.container {
  position: relative;
  margin-left: 100px;
  margin-top: 100px;
  width: 300px;
  height: 300px;
  background-color: grey;
}
.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
}

<div class="Wrap">
  <div class="container">
    <div class="box">
    </div>
  </div>
</div>