绝对定位忽略父级的填充
d51*_*512 159 css css-position padding
你如何使绝对定位元素尊重其父元素的填充？我希望内部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的边缘来实现它,但我宁愿不必添加它.
Kev*_*nry 166
首先,让我们看看为什么会这样.
原因是,令人惊讶的是,当一个盒子position: absolute的包含盒子是父母的填充盒子(即它的填充物周围的盒子).这是令人惊讶的,因为通常(即,当使用静态或相对定位时)包含框是父级的内容框.
在祖先是内联元素的情况下,包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框....否则,包含块由填充边缘形成.祖先.
最简单的方法 - 正如Winter的答案所建议的 - 是padding: inherit在绝对定位上使用div.但是,如果您不希望绝对定位div自己的任何额外填充,它只会起作用.我认为最通用的解决方案(两个元素都可以有自己独立的填充)是:
div在绝对定位的周围添加额外的相对定位(没有填充)div.新的div将尊重其父级的填充,然后绝对定位div将填充它.当然,缺点是你只是出于演示目的而搞乱HTML.
在绝对定位的元素上重复填充(或添加).
这里的缺点是你必须重复CSS中的值,如果你直接编写CSS,那就很脆弱了.但是,如果您正在使用类似的预处理工具,
SASS或者LESS您可以通过使用变量来避免该问题.这是我个人使用的方法.
- 为什么这是“position:absolute”的默认值？令人惊讶的是，包含框是填充框，但一定有一个原因，就像我确信有一个原因（没有“框大小”）“宽度”和“高度”不一样包括填充或边框。 (2认同)
- 这是很好的信息，但这是错误的答案。正确的答案是Winter的以下方法。...使用padding：继承，您的Absolute元素将获取所需的padding。不知道为什么这比正确的答案更有争议...：P (2认同)
Win*_*ter 46
你可以尝试的一件事是使用以下css:
.child-element {
padding-left: inherit;
padding-right: inherit;
position: absolute;
left: 0;
right: 0;
}
它允许子元素从父级继承填充,然后可以定位子级以匹配父级widht和padding.
此外,我正在使用box-sizing: border-box;所涉及的元素.
我没有在所有浏览器中测试过这个,但它似乎在Chrome,Firefox和IE10中运行.
小智 29
好吧,这可能不是最优雅的解决方案(语义上),但在某些情况下它会工作没有任何缺点:而不是填充,在父元素上使用透明边框.绝对定位的子元素将遵循边框,并且它将呈现完全相同(除了您使用父元素的边框进行样式化).
在父div中使用margin而不是padding:http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html
这是我最好的拍摄.我添加了另一个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.如何在同一时间尊重父母和你？
我的解决方案
如果您希望它尊重父母,那么不要绝对定位它.
- 父绝对定位确实尊重它,即它使用的坐标系.当你说top 0px时,这意味着离父母顶部0px.问题是它是否应该考虑到父母的填充.如果父母有一个5px的填充,并且你给了孩子顶部:-5px,如果父母的填充被尊重,它会把它与父母齐平,如果不是父母的填充,则高于父母5px. (3认同)