Css 绝对定位忽略父对象的填充_Css_Padding_Css Position

Css 绝对定位忽略父对象的填充

css

Css 绝对定位忽略父对象的填充,css,padding,css-position,Css,Padding,Css Position,如何使绝对定位元素尊重其父元素的填充？我想要一个内部div延伸到其父级的宽度，并定位在该父级的底部，基本上是一个页脚。但是孩子必须尊重父母的养育之恩，而不是这样做。子对象被压在父对象的边缘上所以我想要这个：但我明白了： <html> <body> <div style="background-color: blue; padding: 10px; position: relative; height: 100px;"> <d

如何使绝对定位元素尊重其父元素的填充？我想要一个内部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>


css sux

我可以在内部div周围加上一个边距，但我不想再加上边距。

这是我的最佳选择。我添加了另一个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>


css sux

编辑：

我认为你想做的事是做不到的。绝对位置意味着你们要给它一定要尊重的坐标。如果父对象的填充为5px，该怎么办。您绝对将孩子定位在顶部：-5px；左：-5px。怎样才能同时尊重父母和你呢

我的解决方案

如果您想让它尊重父元素，那么不要绝对定位它。

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

在父div中使用边距而不是填充：

1。）不能在父元素上使用大边框，以防需要特定边框 2.）您不能添加边距--以防您的父对象是其他容器的一部分，并且您希望您的父对象占据该父对象的全部宽度

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

就你而言：

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

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

原因是，令人惊讶的是，当一个框具有

position:absolute

时，它的包含框就是父对象的填充框（即，其填充周围的框）。这是令人惊讶的，因为通常（即使用静态或相对定位时）包含框是父级的内容框

以下是：

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

温特的答案中建议的最简单的方法是在绝对定位的

div

上使用

padding:inherit

。但是，只有当您不希望绝对定位的

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;
}

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

另外，我正在使用

框大小：边框框用于所涉及的元素
我并没有在所有浏览器中测试过这个，但它似乎在Chrome、Firefox和IE10中都能正常工作
 可以使用额外级别的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>


css sux

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

.box{
背景：红色；
位置：相对位置；
填充：30px；
宽度：500px；
高度：200px；
框大小：边框框；
}

左上角
右上角
居中
左下角
右下角
我会这样设置孩子的宽度：
.child{位置：绝对；宽度：计算（100%填充）；}

在公式中，Padding是左父级和右父级的Padding之和。我承认它可能不是很优雅，但在我的例子中，一个具有覆盖功能的div，它工作了。
为什么不将内部div的左/右/底部更改为style=“背景色：灰色；位置：绝对；左：10px；右：10px；底部：10px；”
？是的，我想到了这一点，但很快就会成为维护方面的难题，因为每个孩子都必须有自己的一组偏移量来解释它。如果他们只尊重父项的填充，那么您可以在父项中设置一次，而不必担心所有子项。如上所述，如果您使用（相对定位）父项的填充值作为（绝对定位）子项上的左：
和右：
，您的问题就解决了。我加上这个b/c，这就是其他有同样问题的人的答案