首页 新闻 赞助 找找看

关于css中position:relative和position:absolute的问题

0
悬赏园豆:15 [待解决问题]

问题描述:

代码:

html:

<div id="a1">
<div id="a2"> </div>
<div id="a3"> </div>
</div>

css:

#a1
{
height:200px;
width:200px;
border:solid 1px red;
}

#a2
{
height:100px;
width:100px;
border:solid 1px blue;
position:absolute;
left:150px;
top:150px;
}

#a3
{
height:50px;
width:50px;
border:solid 1px green;
}

此时效果为:

 

但是为什么将#a2里面的改为position:relative;后就变成了这样了 :

绿色的div的位置如何理解?

如果把html写成这样后:

<div id="a1">
<div id="a3"> </div>
<div id="a2"> </div>
</div>

则又变成这样了:

 

重点是如何理解绿色的div的位置,请赐教!

蜡笔小新111的主页 蜡笔小新111 | 初学一级 | 园豆:6
提问于:2015-04-09 19:52
< >
分享
所有回答(5)
0

absolute:相对于当前窗口(窗口坐标)

relative:相对于父容器或前一个对象(容器坐标)

所以会有你的第一个效果图。

当你把a2的absolute改为relative后,看起来a2的位置不变(因为a1的坐标为0,0,跟窗口坐标一致,可以修改a1的left和top比对),此时a3在a2的后面,就有了新的效果(left不变——div是行ui,top变成了a2的高度,这个是有点奇怪,我的理解也应该是a2的top+a2的height才对)

当你把a2和a3的顺序调换后,a3相对于容器的坐标,正确,a2相对容器或前一个容器(a3)坐标,于是left不变,top变成a3的height+a2的top,

519740105 | 园豆:5810 (大侠五级) | 2015-04-10 07:39
0

因为绿色的div你是放在了红色div里面,所以没写上,左的代码,就默认都为0的,div你加了position:absolute,需再在红色div样式里加position:relative作为父类,才能让浏览器兼容。

JackProm | 园豆:202 (菜鸟二级) | 2015-05-28 13:07
0

当a2改成relative后,a2就处于文档流了,所以a3(green)上面会有留出空位(a2的位置)。

当a2写在a3后面时(relative:相对于没有加relative时div的位置),a2本来的位置就是在a3下面了,所以加relative后就是以a2的原位置(a3的左下角)为基准了,故a2的height会比前面情况的height大了a3的height

至于绿色的a3的位置就和a2有没有relative没有关系了,因为有没有relative a2都处于文档流。a3的位置像平常a2没加relative的位置是一样的。

再加个float看看会更加清晰

小新是也 | 园豆:202 (菜鸟二级) | 2015-08-18 18:38
0

1. #a2里面的改为position:relative;

之前#a2的位置是相对于body的,因为body默认是相对定位

之后#a2的位置是相对于#a1的left:150px;top:150px;  就是你看到的效果

2.绿色的#a3就更好理解了,因为#a3有高度并且是相对定位没有脱离文档流,所以会把#a2顶下来,如果改成绝对的脱离文档流蓝色的#a2则会上去50px,虽然我没有测试但是你可以看下我说对不对。

匠人 | 园豆:280 (菜鸟二级) | 2015-12-15 13:20
0

你所说的问题归根结底还是还是没有明白position:relative;postion:absolution;帮你讲解一下自己就明白是为什么了

1.position:relative;生成相对定位的元素,相对于其正常位置进行定位。(塔索定的位置,是你自己开始这只好了,根据自己设置好的样式,开始算自己的原点来进行定位的)

1.postion:absolution生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。(假如父级元素有position:relative;那么改的其实原点,就是父级元素的左上角开始,假如妒忌元素没有position:relative;那么它的坐标原点就是浏览器的左上角开始)

希望能帮助到你

Cuntain√ | 园豆:332 (菜鸟二级) | 2016-05-12 11:18
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册