如何使一个绝对定位元素尊重其父元素的填充?我想要一个内部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周围的边缘，但我宁愿不添加它。
当前回答
在父div中使用边距而不是填充:http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html
其他回答
可以用额外的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/
1.)你不能在parent上使用大边框——以防你想要一个特定的边框 2.)你不能添加边距——如果你的父容器是其他容器的一部分，你想让你的父容器使用父容器的全宽度。
唯一适用的解决方案是将您的子容器包装在另一个容器中，以便您的父容器成为祖父容器，然后对新的子容器的Wrapper / parent应用填充。或者你可以直接给孩子们涂上填充物。
在你的情况下:
.css-sux{
padding: 0px 10px 10px 10px;
}
好吧，这可能不是最优雅的解决方案(语义上)，但在某些情况下，它将没有任何缺点:在父元素上使用透明边框而不是填充。绝对定位的子元素将遵循边界，并且它将呈现完全相同的效果(除了您使用父元素的边界进行样式化)。
添加填充:继承你的绝对位置
.box{ background: red; position: relative; padding: 30px; width:500px; height:200px; box-sizing: border-box; } <div class="box"> <div style="position: absolute;left:0;top:0;padding: inherit">top left</div> <div style="position: absolute;right:0;top:0;padding: inherit">top right</div> <div style="text-align: center;padding: inherit">center</div> <div style="position: absolute;left:0;bottom:0;padding: inherit">bottom left</div> <div style="position: absolute;right:0;bottom:0;padding: inherit">bottom right</div> </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上都可以运行。
