如何使一个绝对定位元素尊重其父元素的填充?我想要一个内部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周围的边缘，但我宁愿不添加它。
当前回答
1.)你不能在parent上使用大边框——以防你想要一个特定的边框 2.)你不能添加边距——如果你的父容器是其他容器的一部分，你想让你的父容器使用父容器的全宽度。
唯一适用的解决方案是将您的子容器包装在另一个容器中，以便您的父容器成为祖父容器，然后对新的子容器的Wrapper / parent应用填充。或者你可以直接给孩子们涂上填充物。
在你的情况下:
.css-sux{
padding: 0px 10px 10px 10px;
}
其他回答
在父div中使用边距而不是填充:http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html
这是我最好的尝试。我添加了另一个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。怎么能同时尊重父母和你呢?
我的解决方案
如果你想让它尊敬父母，不要绝对定位它。
1.)你不能在parent上使用大边框——以防你想要一个特定的边框 2.)你不能添加边距——如果你的父容器是其他容器的一部分，你想让你的父容器使用父容器的全宽度。
唯一适用的解决方案是将您的子容器包装在另一个容器中，以便您的父容器成为祖父容器，然后对新的子容器的Wrapper / parent应用填充。或者你可以直接给孩子们涂上填充物。
在你的情况下:
.css-sux{
padding: 0px 10px 10px 10px;
}
我将这样设置子节点的宽度:
.child{位置:绝对;宽度:calc(100% - padding);}
填充，在公式中，是左右父填充的和。我承认它可能不是很优雅，但在我的例子中，一个具有覆盖功能的div，它是有效的。
可以用额外的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/
