CSS定位

 

position

 

static:默认值  没有定位  元素还在标准文档流中，位置不发生任何变化
relative:相对定位
1、元素设置相对定位，位置不发生变化，除非设置偏移量（通过left\right\top\bottom属性设置），相对定位的元素位置发生偏移是以该元素没有定位之前的位置作为参照的
2、设置了相对定位的元素还处于标准文档流中，不管元素偏移到哪里，元素的占位还是设置定位之前的占位
3、设置了相对定位的元素，位置的偏移对兄弟元素和父级元素都没有影响
4、设置了position:relative的元素和普通的标准文档流中的元素位置若有重合，那么relative的元素会显示在上层
absolute:绝对定位
1、绝对定位的元素，如果没有设置宽高，宽高将会由内容决定
2、绝对定位的元素脱离了标准文档流，在标准文档流中不占位，若绝对定位元素和标准文档流元素位置有重合，绝对定位元素一定会遮盖标准文档流元素(既遮盖住块又遮盖住内容)
3、绝对定位元素设置偏移量的时候，元素位置发现偏移的参照物规则如下：
1）如果绝对定位元素的祖先元素中没有设置定位的元素(positon的值不为static,其他三个都可以),这个时候绝对定位元素以body为参照物
2) 如果绝对定位元素的祖先元素中有一个定位元素，就以这个定位元素为参照
3）如果绝对定位的元素的祖先元素中有多个定位元素，那么参照物是离绝对定位元素层次最近的那个定位元素

fixed:固定定位

固定定位定律

设置了固定定位的元素脱离了标准文档流，不占位，不设置宽高的情况下，宽高由内容决定
（1）元素框的表现类似于将 position 设置为 absolute，不过参照物是视窗本身。
（2）固定定位是相当于“当前窗口”来进行的定位。
（3）固定定位元素不再占空间，层级要高于普通元素，跟“浮动”很像。
（4）固定定位元素，是一个“块元素”，换句话说，行内元素使用fixed定位，将转成“块元素”。

 

z-index:控制定位元素的堆叠次序，z-index的值默认是0；还可以是其他的整数，z-index的属性值越大，那么对应的定位元素就显示在越上层的位置




设置了绝对定位的元素和固定定位的元素都将变成一个块，并且层级比标准文档流高