如何使绝对定位的元素尊重其父元素的填充?我想要一个内部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个字符时,它的包含盒就是父代的填充盒(即,围绕其填充物的盒子).这很令人惊讶,因为通常情况下(即使用静电或相对定位时),包含框是父母的content框.

以下是relevant part of the CSS specification条:

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

最简单的方法-就像温特的答案中建议的那样-是在绝对定位的div上使用padding: inherit.不过,只有当你不想让绝对定位的div有任何额外的填充时,它才会起作用.我认为最通用的解决方案(因为两个元素都可以有自己的独立填充)是:

  1. 在绝对定位的div周围添加额外的相对定位的div(没有填充).新的div将尊重其父级的填充,然后绝对定位的div将填充它.

    当然,缺点是您只是出于表示的目的来处理HTML.

  2. 在绝对定位的元素上重复填充(或添加).

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

Css相关问答推荐

如何为图像堆叠效果下方的图层实现与磨砂玻璃类似的视觉效果

使用CSS Grid是否可以跳过下一列?

如何使代码块输出在 quarto revealjs 演示文稿中水平滚动

如何在保持默认外观的同时更改 javaFX 中按钮的突出显示 colored颜色

和号 (&) 作为 SASS @mixin 中的变量

CSS动画移动divs upwords

CSS 在具有多个背景图像的元素上过滤一个背景图像

如何应用适当样式的元素加消息框?

如何定位 CSS 网格布局中的特定列或行?

为什么 .class:last-of-type 不能按我的预期工作?

输入/按钮元素不会在 flex 容器中缩小

如何填充 100% 的剩余高度?

使用 CSS 强制侧边栏高度 100%(带有粘性底部图像)?

Flexbox 代码适用于除 Safari 之外的所有浏览器.为什么?

Chrome 呈现 colored颜色 的方式与 Safari 和 Firefox 不同

如何在浏览器的右下角放置一个div?

CSS 插入边框

CSS 悬停与 JavaScript 鼠标悬停

我应该在我的 Bootstrap 项目中使用 normalize.css 吗?

为什么我的 div 边距重叠,我该如何解决?