时间戳

首页 > 解决方案 > 在绝对定位的 div 内定位绝对定位的表单

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>

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

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

标签： htmlcss

解决方案

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

如果你想停在父级的末尾，只需将 width 属性更改为：

width: calc(100% - 48px);

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

width: calc(100% - 96px);

这是一个有效的实时代码笔： https ://codepen.io/alezuc/pen/RwWrpKV

推荐阅读