定位与实现方法盒子居中的

一.相对定位 position:relative

相对于元素本身的位置进行一个位置调整,占位依然在原来的位置

特性:

不影响元素本身的特性

不会使元素脱离正常文档流,也就是还占位

如果没有定位偏移属性,对元素本身没有任何影响

如果有定位偏移属性,则相对于元素原来的位置发生偏移

应用场景:

微调自己的位置

作为绝对定位的参照物

二.绝对定位 position:absolute

没有定位父级时相当于html进行定位,有定位父级时相当于最近的定位父级进行定位

特性

元素脱离正常文档流,不占位

有定位父级相当于定位父级发生偏移

如果没有定位父级相当于浏览器窗口发生定位位移(如果父级没有相对定位,会一直往上找,直到找到html)

能使不能设置宽高的行级元素设置宽高

提升层级

如果没有定位便宜属性,对元素本身有影响,如果有定位便宜属性,则相对于父元素发生偏移

三.固定定位 position:fixed

元素的位置相对于浏览器窗口是固定位置,即便窗口是滚动的他也不会移动

特性

元素脱离正常文档流,不占位

始终相对于浏览器窗口四个角为原点进行固定定位的

不会随页面的内容滚动而滚动

能使不能设置宽高的行级元素设置宽高

提升层级

如果没有定位偏移属性,对元素本身有影响

四.静态定位

表示"将元素放在文档布局流的默认位置,html"元素的默认值,即没有定位,遵循正常的文档流现象

静态定位的元素不会受到top bottom left right影响

定位元素的层级顺序

语法:z-index:n;

标签添加定位之后,可以覆盖在页面的其它标签上

后面加载的定位元素会覆盖在先加载的定位元素上

<