Cha*_*les 36 html css position absolute
假设我有两个div,一个在另一个里面,就像这样:
<html>
<body>
<div id="outer" style="width:50%">
<div id="inner" style="width:100%">
</div>
</div>
</body>
</html>
现在,内部div的宽度为屏幕尺寸的50%的100%,或屏幕尺寸的50%.如果我要将内部div更改为绝对位置,就像这样:
<html>
<body>
<div id="outer" style="width:50%">
<div id="inner" style="position:absolute;width:100%">
</div>
</div>
</body>
</html>
在这种情况下,内部div占据屏幕空间的100%,因为它的位置设置为绝对.
我的问题是:当它的位置设置为绝对值时,有没有办法保持内部div的相对宽度？
小智 68
添加位置:相对于你的外部div.
更新:它的工作原理是因为位置position: absolute相对于具有一定位置的第一个父级(静态除外).在这种情况下,没有这样的容器,所以它使用页面.
是.将外部设置为position:relative.
.outer
{
width: 50%;
height: 200px;
position: relative;
border: 1px solid red;
}
.inner
{
width: 100%;
position: absolute;
height: 100%;
border: 1px solid blue;
}
我有一个必须存在position:absolute于项目中的元素，我发现该设置width可以max-content为我解决这个问题。
它似乎在现代浏览器中得到了很好的支持。检查此链接以获取更多信息：Mozilla.org (max-content)。