CSS定位

定位

1.标准流布局

元素从左到右，从上到下进行布局称为标准流，默认情况下。元素之间不存在层叠关系。
一般使用margin-padding对元素位置进行调整，但不方便做层叠效果。如果想要跳出标准流，使用position

2.相对定位

positon:relative;
仍然是标准流，相对原位置进行微调。
相对定位的应用：图片始终居中显示

position:relative;
transform:translate(-50%); //本身大小的一半
margin:50%;//父元素的一半

背景图片的方式：

background-position： ；

3. 固定定位

脱离标准流
position:fixed
相对于浏览器可视区域

4.绝对定位

脱离标准流,不再占据空间
position:absolute;

• 定位参照物是最邻近的定位元素，若没有则是视口。
• 若希望子元素相对于父元素定位，又不希望父元素脱标，则将父元素设置position:relative;

使用子绝父相定位，父元素width = 子元素width + left + right + margin-left + ｍargin-right
则可得出水平垂直居中方案：

position:absolute;
left:0;
right:0;
top:0;
bottom:0;
width:100px;
height:100px;
margin:auto;

若不设置宽高也不设置margin，则覆盖到父元素

5.粘性定位

可以看作相对定位和固定定位的结合体， 表现像相对定位，当滚动到某个值，表现为固定定位。

position:sticky;
top:0;

相对于最邻近的滚动视口（不一定是窗口），当滚动到顶部时，出现吸顶效果。

各种定位对比：

6.Z-index

如果是兄弟关系

• z-index越大，层叠在越上面
• z-index相等，写在后面的那个元素层叠在上面

如果不是兄弟关系

• 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
• 而且这2个定位元素必须有设置z-index的具体数值