如何使一个绝对定位元素尊重其父元素的填充?我想要一个内部div伸展横跨其父的宽度，并被定位在该父的底部，基本上是一个页脚。但是子进程必须尊重父进程的填充，而它并没有这样做。孩子被压在父母的边缘上。
所以我想要这个:
但我得到了这个
< html > <身体> < span style=" font - family:宋体;填充:10 px;位置:相对;身高:100 px;" > < span style=" font - family:宋体;位置:绝对的;左:0 px;右:0 px;底部:0 px;div css sux " > < / > < / div > < /身体> < / html >
我可以让它发生在内部div周围的边缘，但我宁愿不添加它。
当前回答
你可以尝试使用下面的css:
.child-element {
padding-left: inherit;
padding-right: inherit;
position: absolute;
left: 0;
right: 0;
}
它让子元素从父元素继承padding，然后子元素可以被定位为匹配父元素的width和padding。
此外，我使用box-sizing: border-box;对于所涉及的元素。
我还没有在所有浏览器上测试过这个功能，但它似乎在Chrome、Firefox和IE10上都可以运行。
其他回答
这是我最好的尝试。我添加了另一个Div，并将其设置为红色，并将你的父级高度更改为200px，只是为了测试它。这个想法是，现在子变成了孙子，父变成了祖父。所以父结点尊重父结点。希望你明白我的意思。
<html>
<body>
<div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
<div style="background-color: red; position: relative; height: 100%;">
<div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
</div>
</div>
</body>
</html>
编辑:
我觉得你想做的事是做不到的。绝对位置意味着你要给它必须遵守的坐标。如果父元素的填充是5px。然后你把子图层放在最上面:-5px;左:5 px。怎么能同时尊重父母和你呢?
我的解决方案
如果你想让它尊敬父母，不要绝对定位它。
你可以尝试使用下面的css:
.child-element {
padding-left: inherit;
padding-right: inherit;
position: absolute;
left: 0;
right: 0;
}
它让子元素从父元素继承padding，然后子元素可以被定位为匹配父元素的width和padding。
此外，我使用box-sizing: border-box;对于所涉及的元素。
我还没有在所有浏览器上测试过这个功能，但它似乎在Chrome、Firefox和IE10上都可以运行。
好吧，这可能不是最优雅的解决方案(语义上)，但在某些情况下，它将没有任何缺点:在父元素上使用透明边框而不是填充。绝对定位的子元素将遵循边界，并且它将呈现完全相同的效果(除了您使用父元素的边界进行样式化)。
可以用额外的Div级别轻松完成。
<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
<div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
<div style="background-color: gray;">css sux</div>
</div>
</div>
演示:https://jsfiddle.net/soxv3vr0/
我将这样设置子节点的宽度:
.child{位置:绝对;宽度:calc(100% - padding);}
填充，在公式中，是左右父填充的和。我承认它可能不是很优雅，但在我的例子中，一个具有覆盖功能的div，它是有效的。
