Html 在绝对定位div中定位绝对定位窗体

我试图在绝对定位的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>

小提琴：

---

但是，绿色的形式超越了它的父母，而不是留在它的父母。为什么？如果您能给我一些详细的解释，谢谢

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

如果要在父对象的末尾停止，只需将“宽度”属性更改为：

width: calc(100% - 48px);

如果希望从左侧和右侧保持相同的距离，请将其加倍：

width: calc(100% - 96px);

这是一个正在工作的实时代码笔：