Question

我有一个绝对定位的div，它也是绝对定位元素的子元素。设置宽度：100％;左：1px;右：1px给孩子不工作。我面临的问题是，它超越了父元素。

<div class="outer">
  <div class="inner">

  </div>
</div>
.outer{
    position:absolute;
    width:80px;height:80px;
  border:1px solid #d3d3d3;
 }
.inner{
   position:absolute;
   width:100%;
   height:100%;
   background:red;
   left:1px;right:1px;bottom:1px;top:1px
}

参考here

Answer 1

只需删除子元素上的100％，内部div将适合父元素。

.outer{
  position:absolute;
  width:80px;height:80px;
  border:1px solid #d3d3d3;
}
.inner{
  position:absolute;
  background:red;
  left:1px;right:1px;bottom:1px;top:1px
}

Answer 2

这是因为你的宽度和高度都是100％，这意味着它也是80px PLUS的左上角和右下角属性，所以盒子放在另一个上面。现在，如果你想让它进入盒子并完全按比例移除高度和宽度：

.inner{
   position:absolute;
   background:red;
   left:1px;right:1px;bottom:1px;top:1px 
}

Answer 3

你也可以这样做：

＆＃13;

.outer{
  margin-top: 10px;
  position:absolute;
  width:80px;height:80px;
  border:1px solid #d3d3d3;
  padding: 1px;
}
.inner{
  position:relative;
  width:100%;
  height:100%;
  background:red;
}

＆＃13;

宽度和左值的绝对定位不是很好

3 个答案: