position定位个人理解详解

position定位

1，position: static

2，position: relative

3，position: absolute

4，position: fixed

5，position: sticky

各个属性值的描述：

static(静态)

• 不脱离文档流，static(静态) 没有特别的设定，遵循基本的定位规定
• 不能通过z-index进行层次分级，在普通流中，各个元素默认的属性。

 relative(相对定位)

• 不脱离文档流，relative(相对定位) 对象不可层叠
•  参考自身静态位置通过 top,bottom,left,right 定位。

 absolute(相对定位)

• 脱离文档流，通过 top,bottom,left,right 定位
• 参考定位的对象是选取其最近一个有定位设置的父级-对象进行绝对定位（父级定位设置除了static，其它定位随便都管，但是要注意最好是设置relative,因为不会影响父元素的位置，设置其他定位也会使绝对定位生效，但是相对的有部分定位也会影响父盒子的位置那就多此一举了）
• 如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。

 fixed（固定定位）

• 脱离文档流 , fixed（固定定位）
• 参照对像是可视窗口而并非是body或是父级元素。使用了fixed的元素不会随着窗口的滚动而滚动。属于absolute的子集
• Fixed 定位使元素的位置与文档流无关，因此不占据空间。Fixed 定位的元素和其他元素重叠。

sticky（粘性定位） 

• 根据用户的滚动位置进行定位。
• 粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
• 至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用
• 实际开发中，是需要监听视图窗口滚动的位置的，到某一具体位置控制粘性盒子的显示和隐藏