绝对定位忽略父代的填充
你如何使一个绝对定位的元素能够尊重其父项的填充？ 我想要一个内部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的答案中所建议的）是使用padding: inherit绝对定位的div 。 它只适用于，但是，如果你不希望绝对定位的div有其自己的任何额外的填充。 我认为最通用的解决方案（两个元素都可以有自己独立的填充）是：
在绝对定位的div周围添加一个额外的相对定位的div （没有填充）。 那个新的div会尊重它的父级填充，然后绝对定位的div将填充它。
当然，不利的一面是，你仅仅为了表示的目的而搞乱了HTML。
在绝对定位的元素上重复填充（或添加到它）。
这里的缺点是你必须重复你的CSS中的值，如果你直接编写CSS，这是脆弱的。 但是，如果您使用SASS或LESS等预处理工具，则可以通过使用变量来避免该问题。 这是我个人使用的方法。
有一件事你可以尝试使用下面的CSS：
.child-element {
padding-left: inherit;
padding-right: inherit;
position: absolute;
left: 0;
right: 0;
}
它允许子元素从父项继承填充，然后可以将子项定位到与父项widht和填充项匹配。
另外，我正在使用box-sizing: border-box; 对于涉及的元素。
我没有在所有浏览器中测试过这个功能，但它似乎可以在Chrome，Firefox和IE10中使用。
那么，这可能不是最优雅的解决方案（语义上），但在某些情况下，它将工作没有任何缺点：而不是填充，在父元素上使用透明边框。 绝对定位的子元素将遵循边界，并且它将呈现完全相同（除了使用父元素的边框进行样式化）。
链接地址: http://www.djcxy.com/p/88465.html