父母的填充绝对定位
你如何使一个绝对定位的元素荣誉父母的填充？ 我想要一个内部div来横跨其父母的宽度，并定位在该父母的底部，基本上是一个页脚。 但孩子必须尊重家长的填充，而不是这样做。 孩子被压在父母的边缘。
所以我想要这个：
但我得到这个：
<html> <body> <div style="background-color: blue; padding: 10px; position: relative; height: 100px;"> <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div> </div> </body> </html> 我可以用内部div的边距来实现，但是我不想添加这个。
首先，让我们看看为什么会发生这种情况。
原因是，令人惊讶的是，当一个盒子的position: absolute它的包含盒子是父母的填充框（即，围绕它的填充框）。 这是令人惊讶的，因为通常（即，使用静态或相对定位时）包含框是父母的内容框。
以下是CSS规范的相关部分 ：
在祖先是内联元素的情况下，包含块是围绕为该元素生成的第一个和最后一个内联框的填充框的边界框。否则，包含块由填充边祖先。
最简单的方法（如Winter的答案中所build议的）是使用padding: inherit绝对定位的div 。 它只适用于，如果你不想绝对定位的div有其自己的任何额外的填充。 我认为最通用的解决scheme（在这两个元素可以有自己的独立填充）是：
-
在绝对定位的
div周围添加一个相对定位的div（没有填充）。 那个新的div将会尊重父母的填充，绝对定位的div会填充它。不利的一面是，为了expression的目的，你只是搞乱了HTML。
-
在绝对定位的元素上重复填充（或添加）。
这里的缺点是你必须重复你的CSS中的值，如果你直接写CSS，这是脆弱的。 但是，如果您使用
SASS或LESS等预处理工具，则可以通过使用variables来避免该问题。 这是我个人使用的方法。
有一件事你可以尝试使用下面的CSS：
.child-element { padding-left: inherit; padding-right: inherit; position: absolute; left: 0; right: 0; }
它允许子元素从父项inheritance填充，然后可以将子项定位到匹配父项widht和填充项。
另外，我正在使用box-sizing: border-box; 对于涉及的元素。
我没有在所有浏览器中testing过，但似乎在Chrome，Firefox和IE10中都能正常工作。
那么，这可能不是最优雅的解决scheme（语义上），但在某些情况下，它将工作没有任何缺点：而不是填充，使用父元素的透明边框。 绝对定位的子元素将遵循边界，并且它将呈现完全相同（除了使用父元素的边框进行样式化）。
这是我最好的一击。 我添加了另一个Div，并将其设为红色，并将您的父母的身高改为200px，以便对其进行testing。 这个想法是孩子现在成为孙子，父母成为祖父母。 所以父母尊重父母。 希望你能明白我的想法。
<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; 左：5px 。 这是怎么想，在同一时间兑现父母和你？
我的解决scheme
如果你想要尊重父母，那么不要把它放在绝对的位置。
在父div中使用margin而不是填充： http : //blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html
1）你不能在父母上使用大的边框 – 如果你想有一个特定的边框
2.）您不能添加保证金 – 以防您的父母是其他容器的一部分，并且您希望您的父母获得该父母的全部宽度。
唯一适用的解决scheme是将您的孩子包装在另一个容器中，以便您的父母成为祖父母，然后将填充应用于新的孩子的包装/父母。 或者你可以直接给孩子填充填充。
在你的情况下：
.css-sux{ padding: 0px 10px 10px 10px; }
可以很容易地使用额外的级别的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/
