position定位

position定位

position属性用于指定一个元素在文档流中的定位方式，top、right、bottom、left属性则决定了该元素的最终位置。

position取值

satic(默认值）、relative、absolute、fixed、sticky

relative：相对定位

1、如果没有定位偏移量，对元素本身没有任何影响。


如果要使蓝色方块移到黄色方块的右边，可以这样写：
效果是这样的：
使用定位可以直接这样写：
2、不使元素脱离文档流。
3、不影响其他元素布局。
4、left、right、top、bottom是相对于当前元素自身左上角进行偏移的。

absolute：绝对定位

1、使元素脱离文档流。


2、使内联元素支持宽、高（让内联元素具备块的特性）


给它加上绝对定位：

3、使块元素默认宽根据内容决定。


4、如果有定位祖先元素则相对于祖先元素发生偏移，无定位祖先元素则相对于整个文档可是部分发生偏移（绝对、相对。固定）

fixed固定元素

1、使元素完全脱离文档流。
2、使内联元素支持宽、高（具备块的特性）
3、使块元素默认宽根据内容决定（具备内联的特性）
4、相对于整个浏览器进行偏移，不受浏览器滚动条的影响。
（可以做返回顶部、弹窗等）

sticky黏性定位

在指定的位置，进行黏性操作。
1、单加position：sticky无变化。
2、加：position：sticky，top：0拖到顶端时固定不到。

z-index定位层级

1、默认层级为0。
2、嵌套时候的层级问题
父元素之间相互比较层级
3、层级可写1、2、也可以写负值。