css定位模式position

版权声明：本篇文章由IT_CREATE整理 https://blog.csdn.net/IT_CREATE/article/details/83926585

定位模式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个属性，分别定位该元素需要距离浏览器边框移动多少个像素。元素移动之后位置由其他元素替代