CSS（六）元素定位（position）

本章主要内容

定位介绍

static 定位

relative 定位

absolute 定位

fixed 定位

sticky 定位

一、position介绍

position属性适用于 任何元素；

二、默认定位（position:static ）

A、作用：

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

B、特点：

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

三、相对定位（position:relative）

A、作用：

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

B、特点：

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

四、绝对定位（position:absolute）

A、作用：

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

B、特点：

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

五、固定（position:fixed）

A、作用：

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

B、特点：

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

六、磁贴（position:sticky）

A、作用：

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

B、特点：

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