在绝对定位div内定位绝对定位窗体

Question

我正在尝试在绝对定位的div中定位绝对定位的窗体。

<div style="position: relative; background-color: white;width: 639px;height: 626px;">
  <div style="position: absolute;height: 442px; width: 639px; top: 184px; background-color: #F1F1F1">
    <form style="width: 100%;height:100px;position: absolute; margin: 42px 48px auto 48px; background-color: green" >
    </form>   
  </div>
</div>

小提琴：https://jsfiddle.net/flamant/7u9kz6xc/10/

但是绿色表单超出了它的父级，而不是停留在它的父级内部。为什么？如果你能给我一些详细的解释，谢谢

Answer 1

绿色块超过了父宽度，因为它的宽度为100%，您必须添加边距宽度，即48px。

如果要在父元素的结尾处停止，只需将width属性更改为：

width: calc(100% - 48px);

如果你想从左边到右边有相同的距离，可以加倍：

width: calc(100% - 96px);

这是一个可以工作的实时代码：https://codepen.io/alezuc/pen/RwWrpKV