Question

如何使绝对定位元素尊重其父元素的填充？我希望内部div在其父级的宽度上伸展，并且位于该父级的底部，基本上是一个页脚。但孩子必须尊重父母的填充，而不是那样做。孩子被压在父母的边缘。

所以我想要这个：

enter image description here

但我得到了这个：

enter image description here

<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的边距来实现它，但我不想添加它。

Answer 1

首先，让我们看看为什么正在发生这种情况。

原因是，令人惊讶的是，当一个方框有position: absolute时，其包含的框是父级的填充框（即填充框周围的框）。这是令人惊讶的，因为通常（即，当使用静态或相对定位时）包含框是父的内容框。

以下是relevant part of the CSS specification：

在祖先是内联元素的情况下，包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框....否则，包含块由祖先的填充边缘。

最简单的方法 - 如Winter的答案所示 - 是在绝对定位的padding: inherit上使用div。但是，如果你不希望绝对定位的div拥有自己的任何额外填充，它只能起作用。我认为最通用的解决方案（两个元素都可以有自己独立的填充）是：

在绝对定位的div周围添加一个额外的相对定位的div（没有填充）。新的div将尊重其父级的填充，绝对定位的div将填充它。

当然，缺点是你只是出于演示目的而搞乱HTML。
在绝对定位的元素上重复填充（或添加）。

这里的缺点是你必须重复CSS中的值，如果你直接编写CSS，那就很脆弱了。但是，如果您使用的是SASS或LESS等预处理工具，则可以通过使用变量来避免此问题。这是我个人使用的方法。

Answer 2

嗯，这可能不是最优雅的解决方案（语义上），但在某些情况下它可以正常工作：不使用填充，而是在父元素上使用透明边框。绝对定位的子元素将遵循边框，并且它将呈现完全相同（除了您使用父元素的边框进行样式设置）。

Answer 3

在父div中使用margin而不是padding：http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html

Answer 4

这是我最好的拍摄。我添加了另一个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;左：-5px 。如何在同一时间尊重父母和你？

我的解决方案

如果您希望它尊重父母，那么请不要绝对定位。

Answer 5

1。）你不能在父母身上使用大边框 - 如果你想要一个特定的边框

2.）你不能添加保证金 - 如果你的父母是其他一些容器的一部分，你希望你的父母采取该父母的全部宽度。

应该适用的唯一解决方案是将您的孩子包装在另一个容器中，以便您的父母成为祖父母，然后将填充应用于新孩子的包装/父母。或者你可以直接给孩子们填充填充物。

在你的情况下：

.css-sux{
  padding: 0px 10px 10px 10px;
}

Answer 6

可以使用额外级别的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/

Answer 7

在您的绝对位置添加 padding：继承

.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>

Answer 8

我会这样设置孩子的宽度：

.child {position: absolute; width: calc(100% - padding);}

公式中的填充是左右父对象填充的总和。我承认它可能不是很优雅，但是就我而言，具有叠加功能的div确实有效。

绝对定位忽略父级的填充

8 个答案: