问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

绝对定位忽略父级的填充

社区维基
1
新手上路，请多包涵

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

原文由 d512 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译csspaddingcss-position
阅读 760
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

这是 CSS 规范的相关部分：

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

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

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

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

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

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

原文由 Kevin Christopher Henry 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

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

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

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

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

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

原文由 Winter 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题