CSS基本布局---定位position

定位

页面布局时可以使用css中的position属性手动控制元素在包含块的精准位置，
通过top、bottom、left、right设置元素的偏移量。

pisition属性值

• 默认值static：静态定位（不定位）
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位
• sticky：粘性定位

---

1)static

静态定位，元素的默认定位方式，即没有定位

2)relative

相对定位

1. 以自己原来的位置为标准移动
2. 不会导致元素脱离标准流，依然是标准流对待，只是在原来位置上进行偏移,盒子的偏移不会对其他盒子有影响,位置继续占有

3）absolute

绝对定位，我们可以用来设置子元素在其父元素中的一个相对的位置

1. 找祖先元素中的第一个定位元素（只要position不是static），该元素的填充盒（padding+conetxt）为其包含块，没有祖先元素或祖先元素均没有定位以浏览器为准
2. 脱离标准流，不再继续占有位置

子绝父相

我们在布局的时候经常会用到的一种方式

1. 子级绝对定位absolute，不会占有位置，可以放在父盒子里的任何一个位置，不会影响其他兄弟盒子
2. 父盒子需要加定位限制子盒子在父盒子内显示
3. 父盒子布局时，需要占有位置，因此只能是相对定位relative

4）fixed

固定定位

3. 固定为视口（浏览器的可视窗口）
4. 脱离标准流，不再继续占有位置

5）sticky

粘性定位

1. 以可视窗口为参照，占有原来的位置

定位重叠

设置z-index的值，值越高优先级越高，会压住其他盒子