position属性是CSS中比较重要也比较难以理解的属性,下面我就来谈谈我自己的理解吧!
position属性的取值有:
1.static(默认值,块级元素和内联元素按照正常的方式进行排列)
2.relative(相对定位)
relative相对定位是指相对自己原来的位置定位,而且它不会脱离正常的文档流,也就是还是会占据网页中的位置
当设置left和top时,元素会以窗口的左上角为原点,设置left就是向x轴正半轴移动,设置top就是向y轴的负半轴运动,如下图
同理,设置right和bottom时,也是相对于左上角,设置right时会沿着x轴负半轴运动,设置bottom时会沿着y轴正半轴运动
这里有一个等价的公式:
bottom : 50px=top : -50px
right : 50px=left : -50px
3.absolute(绝对定位)
绝对定位要比相对定位复杂,设置了绝对定位的元素会脱离正常的文档流,不再占有页面的位置
用上面relative的坐标轴的方法来解析absolute就是
- 同时设置left和top时,是相对与窗口的左上角进行定位,即
- 同时设置right和top时,是相对窗口的右上角进行定位,即
- 同时设置left和bottom时,是以窗口的左下角为原点进行定位
- 同时设置right和bottom时,以窗口右下角为坐标原点
这就是和relative最大的不同的地方了,relative都是以左上角为原点,主要原因还是因为relative的相对对象是它自己本身,而元素在没有设置任何定位属性时,默认的就是在左上角。
还有一点需要注意的是,绝对定位不受父元素的高度的影响,也就是就算父元素设置了一定的高度,绝对定位还是会相对于窗口的底部进行定位,而不是父元素的底部进行定位。
- relative和absolute在有父元素的情况下的不同点
如果给父元素设置边距,没有设置定位时,relative会继承父元素的边距,absolute就不会,比如下面的例子:
.per{
width: 300px;
height: 300px;
background-color: gray;
margin-left: 50px;
margin-top: 50px;
}
.div1{
width: 100px;
height: 100px;
background-color: pink;
position: relative;
right: 50px;
bottom: 50px;
}
效果是
解释一下,如果子元素没有继承父元素的边距的话,子元素就会有一部分隐藏进浏览器中,根据relative的用法可以知道,而这里子元素全部出来了,就说明子元素受到了父元素的影响;
如果把relative改成absolute的话,就会出现下面这种结果
从上图可以看出子元素没有受到父元素的影响。
如果父元素设置了定位时,它们俩就都会受到父元素的影响,比如给父元素设置position为relative,left:50px;top:50px;时,就会产生下面的结果
子元素设为relative时:
子元素设为absolute时:
这里的absolute就是相对于父元素进行定位了。
4.fixed(固定定位)
fixed会使元素脱离正常的文档流,拥有层级的概念,如果一个元素设置了fixed定位,它就不会随着页面的滚动而动。
它进行定位的时候也是基于窗口的四个角,和absolute差不多,但是它和absolute也有不同的地方,就是当父元素设置了定位属性时,absolute属性会相对于父元素进行定位,而fixed不会,它还是会按照自己的方式进行定位。
5.inhert(继承)
这个属性是用来继承父元素的定位属性,如果父元素没有设置任何属性,子元素也没有任何属性。
好了,我的总结就到这里了,如果有什么问题,欢迎在评论下方进行回复,我们可以一起讨论!