定位模式position
绝对定位
position: absolute;绝对定位,它会将需要定位的元素,从元素结构树中将定位的元素抽离,然后使用left、 top、right、bottom四个属性,分别定位该元素需要距离最近的父元素的边框移动多少个像素,比如:left:200px,将元素向右移动200个像素,让该元素距离父元素的边框存在200个像素的距离。
如果元素不存在可以支持定位属性的父元素存在,那么将直接使用body来作为移动的标准。元素在移动之后,之前的位置将会自动让出,由其他元素来继续填充!(移动的像素可正可负)
例如:
.div01{
position: absolute;
/*表示距离父级元素的左边框移动了多少个像素*/
left: 100px;
/*表示距离父级元素的顶边框移动了多少个像素*/
top: 50px;
}
它的父类是body
相对定位
position: relative;相对定位,需要定位的元素,不会从元素结构树中被抽离出来,当然,我们还是用left、 top、right、bottom四个属性,分别定位该元素相对于原有的位置移动多少个像素。元素在移动之后,之前元素占有的位置依然占用,不会腾出来。
效果:
固定定位
position: fixed;固定定位,如果说绝对定位是采用父元素来做为参考标准,相对定位是采用元素之前的位置来作为参考标准,那么固定定位它就是采用浏览器的边框来作为参考标准。
固定定位它就是采用浏览器的边框来作为参考标准。它跟absolute绝对定位一样,它也会被踢出元素结构树,而单独存在。依旧使用left,、top、 rght,、bottom个属性,分别定位该元素需要距离浏览器边框移动多少个像素。元素移动之后位置由其他元素替代