绝对定位，忽略父填充

173

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

css padding css-position

— d512
source

5

为什么不将内部div的左/右/底部更改为style="background-color: gray; position: absolute; left: 10px; right: 10px; bottom: 10px;"？

— j08691 2013年

12

是的，我想到了这一点，但这很快就使人难以维持，因为每个孩子都必须有一套自己的补偿来解决。如果他们只是尊重父母的填充物，那么您可以在父母中设置一次，而不必担心所有的孩子。

— 2013年

正如上面所指出的，如果你使用的（相对定位）父母的填充值作为left:与right:上（绝对位置）的孩子，你的问题就解决了。我要添加此b / c，这就是其他可能遇到相同问题的人的答案。

— rda3000

这里有一个类似的问题：jsfiddle.net/5n4By/6。页脚尊重其父级的左侧填充，但右侧溢出。您希望它也能尊重正确的填充物，以保持一致……

— rafiki_rafi 2013年

186

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

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

这是CSS规范的相关部分：

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

正如Winter的答案所建议的那样，最简单的方法是padding: inherit在绝对位置上使用div。但是，仅当您不希望绝对位置div具有自己的任何其他填充时，它才有效。我认为最通用的解决方案（因为这两个元素可以具有各自独立的填充）：

div在绝对位置周围添加一个额外的相对位置（无填充）div。该新对象div将尊重其父对象的填充，然后绝对位置div将填充它。

当然，不利的一面是您只是出于演示目的而将HTML弄乱了。
在绝对定位的元素上重复填充（或添加）。

不利之处是您必须在CSS中重复这些值，如果直接编写CSS，这将很容易。但是，如果您使用的是预加工的工具，像SASS或者LESS您可以使用一个变量来避免这个问题。这是我个人使用的方法。

— 凯文·克里斯托弗·亨利
source

为什么这是默认值position: absolute？令人惊讶的是，包含框是填充框，但一定有一个原因，就像我确定有一个理由（不含box-sizing）的width＆height不包含填充或边框一样。

— trysis

1

只是补充：box-sizing父母或子女的财产均不受此影响。这是因为这会影响大小，如宽度/高度，但不会影响容纳框，尽管我承认，如果这同时影响到两者，则更有意义。

— trysis

2

这是很好的信息，但这是错误的答案。正确的答案是Winter的以下方法。...使用padding：Inherit，您的Absolute元素将获取所需的padding。不知道为什么这比正确的答案更具争议...：P

— NotaGuruAtAll

1

@NotaGuruAtAll：padding: inherit如果绝对定位div不需要其自身的填充，则效果很好，并且我还提到了该技术。但是，它的灵活性较差，因为您不能在绝对位置添加任何其他填充div（即您不能说padding: inherit + 5px）。这就是为什么我更喜欢这里提到的技术。

— 凯文·克里斯托弗·亨利

1

position:absolute如果您只是想让孩子尊重父母的填充物，那么在child元素上进行继承继承确实可以工作。但是，如果要向孩子添加其他填充，则必须在代码中检查填充的比例。没有干净的方法仅使用CSS就能做到。

— 迪伦·皮尔斯

51

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

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

它允许子元素从父元素继承填充，然后可以放置子元素以匹配父元素的填充和填充。

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

我尚未在所有浏览器中都进行过此测试，但似乎可以在Chrome，Firefox和IE10中使用。

— 冬季
source

我结合了这个答案和@NewSpender的答案。在我的特殊情况下，绝对定位的div保持忽略了填充，但被其父元素的限制。因此，给绝对定位的div加上白色的粗边框会掩盖我所需的填充。但是前提是背景必须是相同的颜色。

— Ogier Schelvis，2008年

但是OP不想让孩子继承父母的填充。他希望孩子根据父母的垫子得到补偿。

— Michael Gummelt

30

嗯，这可能不是最优雅的解决方案（从语义上来说），但是在某些情况下，它可以正常工作而没有任何缺点：在父元素上使用透明边框代替填充。绝对定位的子元素将采用边框，并且将完全相同（除非您使用父元素的边框进行样式设置）。

— NewSpender
source

8

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

— 尼洛克
source

请注意，背景（颜色）未像填充一样应用于边距

— Paul

6

这是我最好的拍摄。我添加了另一个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。应该如何同时尊重父母和您？

我的解决方案

如果您想让它尊敬父母，请不要绝对定位它。

— 触摸
source

谢谢，我很感激这篇文章，但这仍然是解决实际问题的一种方法。我真正想知道的是，是否可以让孩子们尊重父元素的填充。如果结果为否，我会给你代表。

— d512 2013年

如果绝对定位它们，则它们将不尊重其父元素。他们会尊重你的。出于同样的原因，如果您不完全定位它们，则不能真正使用bottom：10px之类的东西，因为它们会尊重其父元素。但是，我想您想做的是为矛盾留出余地，因此在浏览器中会有所不同。我认为只有解决之道。

— 触摸

3

绝对定位确实尊重父级，这就是它使用的坐标系。当您说顶部0px时，表示距离父级顶部0px。问题是是否应该考虑父母的脚步。如果父级的填充为5px，而您给孩子的顶部设置为-5px，则如果父级的填充得到遵守，它将与父级齐平；否则，父级会比父级高5px。

— 2013年

3

1.）您不能在父对象上使用大边框-如果要使用特定的边框

2.）您不能添加边距-如果您的父对象是其他某个容器的一部分，并且您希望父对象使用全部边框那位祖父母的宽度。

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

在您的情况下：

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

— bhavya_w
source

1

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

— 阿桑卡斯里
source

0

添加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>

展开摘要

— ßãlãjî
source