css中定位属性position

一、css中定位分为三种：

position:fixed 固定定位

position:relative 相对定位

position:absolute 绝对定位

注意在使用时，要配合定位坐标来使用：

left（距离左边多远）；right；top；bottom；

二、使用

position:fixed：固定定位，它是相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素显示的位置不会改变；

特点：

·固定定位元素它脱离了标准文档流

·固定定位元素的的层级比标准文档流里面的元素要高所以固定定位元素它会压盖住标准文档流里面的元素

·固定定位元素它不再占用空间。

·固定定位元素它显示的位置不会随着浏览器滚动而滚动

position:relative：相对定位相当于“自己”来定位；

特点：

·相对定位元素它没有脱离标准文档流

·相对定位元素没有设置定位坐标，那么相对定位元素还在原来位置

·相对定位元素设置了定位坐标，就会在原位置留下一个空白元素

·相对定位元素会将标准文档流中的元素压盖住

·相对定位元素的定位值可以为负数

注意：相对定位很少单独使用，主要是结合绝对定位来使用；

position:absolute：绝对定位元素它会先去查找其父元素是否设置了定位的属性，如果有设置定位的属性那么它就会相对于其父元素来进行定位;但是如果它的父元素没有设置定位属性，那么它就会去查找其父元素的上一级元素是否设置了定位的属性,如果有设置就相对于其父元素的上一级元素进行定位，但是如果没有设置，那么会继续往向一级进行查找，如果其祖先元素都没有设置定位属性，那么它会相对于“浏览器窗口”来进行定位!

特点：

·绝对定位元素它脱离了标准文档流。

·绝对定位元素它不再占用空间。

·绝对定位元素它会压盖住标准文档流中的元素。

·绝对定位元素他会相对于其祖先定位元素来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位，但是我们一般只会给其祖先定位元素设置相对定位属性“子绝父相”子元素设置绝对定位父元素设置相对定位。