CSS（六）元素定位（position）

本章主要内容

定位介绍

static 定位

relative 定位

absolute 定位

fixed 定位

sticky 定位

1、position介绍

position属性适用于 任何元素；

2、默认定位（position:static ）

A、做用：

• 是元素定位于天然流中，上下左右的偏移对其无效（默认属性），回归本真；

B、特色：

• 忽略 top、bottom、 right、left或z-index的偏移
• 两个未浮动的相邻的元素若是都设置了外边距（margin）那么最终的外边距 = 二者中最大的
• 未浮动的块级元素若是设置了width与height，且static的左右定位都是auto，左右外边距会自动平分整个剩余宽度，元素自动水平居中；

3、相对定位（position:relative）

A、做用：

• 为子元素绝对定位（absolute）作了一个参照物；

B、特色：

• 能够使用top、bottom、left、right或者z-index进行相对于本身定位偏移；
• 相对定位的元素不会离开天然流
• 任何元素均可以设置relative，他的后代均可以相对于他进行绝对定位；
• z-index能够对堆叠的元素进行排序

4、绝对定位（position:absolute）

A、做用：

• 元素脱离天然流进行定位偏移；

B、特色：

• 使元素脱离天然流；
• 若是父及元素没有relative属性，那么会参照body进行定位；
• 元素设置了width与height，且四个方向定位偏移都为0，且同时设置了margin:auto则会居中；
• 元素没设置width与height， 且四个方向定位偏移都为0，则子元素会与relative的父元素重合；

5、固定（position:fixed）

A、做用：

• 与absolute很类似，fixed的参照物是视口，absolute参照物是relative；

B、特色：

• 固定在视口上，不随滚轮的滑动而改变位置；

6、磁贴（position:sticky）

A、做用：

• relative与fixed的完美结合，制造出吸附的效果；

B、特色：

• 产生偏移，位置还在天然流中；
• 参照物是有滚动的属性的父级元素，没有滚动属性则选视口；