“position:absolute”的任何方式div保留相对宽度? [英] Any way for "position:absolute" div to retain relative width?
问题描述
所以我们假设我有两个div,一个在另一个里面,像这样:
< html&
< body>
< div id =outerstyle =width:50%>
< div id =innerstyle =width:100%>
< / div>
< / div>
< / body>
< / html>
现在,内部div的宽度为屏幕尺寸的50%的100% 50%的屏幕尺寸。如果我把内部div改为绝对位置,像这样:
< html>
< body>
< div id =outerstyle =width:50%>
< div id =innerstyle =position:absolute; width:100%>
< / div>
< / div>
< / body>
< / html>
在这种情况下,内部div占用屏幕空间的100%,因为它的位置设置为绝对。
我的问题是这样:有没有办法维持内部div的相对宽度,而其位置设置为绝对? / p>
感谢!
:
位置:绝对$ c $ c>相对于具有一些定位(除了静态)的第一父亲。在这种情况下,没有这样的容器,所以它使用的页面。
So let's say I have two divs, one inside the other, like so:
<html>
<body>
<div id="outer" style="width:50%">
<div id="inner" style="width:100%">
</div>
</div>
</body>
</html>
Right now, the inner div has a width of 100% of 50% of the screen size, or 50% of the screen size. If I were to change the inner div to position absolute, like this:
<html>
<body>
<div id="outer" style="width:50%">
<div id="inner" style="position:absolute;width:100%">
</div>
</div>
</body>
</html>
In this case the inner div takes up 100% of the screen space, because its position is set to absolute.
My question is this: Is there any way to maintain relative width of the inner div while its position is set to absolute?
Thanks!
解决方案 Add position:relative to your outer div.
update: It works because positions in position: absolute
are relative to the first parent that has some positioning (other than static). In this case there was no such container, so it uses the page.
这篇关于“position:absolute”的任何方式div保留相对宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!