214

如何使绝对定位元素尊重其父元素的填充？我希望一个内部 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 周围的边距来实现它，但我不想添加它。

4

9 回答 9

244

首先，让我们看看为什么会这样。

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

这是CSS 规范的相关部分：

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

正如 Winter 的回答所建议的，最简单的方法是padding: inherit在绝对定位的div. 但是，它仅在您不希望绝对定位div具有自己的任何额外填充时才有效。我认为最通用的解决方案（因为两个元素都可以有自己独立的填充）是：

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

    当然，缺点是您只是为了演示目的而弄乱了 HTML。

  2. 在绝对定位的元素上重复填充（或添加）。

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

于 2015-06-14T04:47:27.263 回答
70

您可以尝试的一件事是使用以下 css：

.child-element {
    padding-left: inherit;
    padding-right: inherit;
    position: absolute;
    left: 0;
    right: 0;
}

它让子元素从父元素继承填充，然后可以定位子元素以匹配父元素的宽度和填充。

另外，我正在使用box-sizing: border-box;所涉及的元素。

我没有在所有浏览器中测试过这个，但它似乎在 Chrome、Firefox 和 IE10 中工作。

于 2015-09-10T13:43:34.957 回答
34

好吧，这可能不是最优雅的解决方案（语义上），但在某些情况下它会毫无缺点地工作：在父元素上使用透明边框代替填充。绝对定位的子元素将遵循边框，并且将呈现完全相同的内容（除非您使用父元素的边框进行样式设置）。

于 2013-11-09T18:11:24.817 回答
8

这是我最好的尝试。我添加了另一个 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。如何同时尊重父母和你？

我的解决方案

如果你想让它尊重父母，那么不要绝对定位它。

于 2013-06-14T19:07:10.180 回答
8

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

于 2014-02-27T19:41:05.567 回答
3

1.) 你不能在父级上使用大边框——如果你想有一个特定的边框

2.) 你不能添加边距——如果你的父级是其他容器的一部分并且你希望你的父级占据全部那个祖父母的宽度。

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

在你的情况下：

.css-sux{
  padding: 0px 10px 10px 10px;
}
于 2015-05-28T06:29:07.250 回答
3

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

于 2016-11-10T07:46:33.517 回答
1

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

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

公式中的Padding是左右父级的padding之和。我承认它可能不是很优雅，但在我的例子中，一个具有覆盖功能的 div 是有效的。

于 2020-11-06T16:59:07.747 回答
1

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

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

于 2020-05-05T07:05:12.410 回答