本文介绍了有没有什么办法可以让“position:absolute” div保留相对宽度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

假设我有两个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的相对宽度,而其位置设置为绝对?

解决方案

位置:相对添加到您的外部div。 > update :它的工作原理是因为 position:absolute 中的位置相对于具有某种定位的第一个父对象(静态除外)。在这种情况下,没有这样的容器,所以它使用该页面。


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?

解决方案

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保留相对宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 08:23