相对定位绝对定位

一、什么是定位？

定位是一种高级的布局方式。通过position设置，可以将任何元素放在页面任意的位置。

二、如何开启定位

position：static;    默认值，没有开启定位
          relative   相对定位
          absolute   绝对定位
          fixed      固定定位
          sticky     粘滞定位

三、相对定位

position:relative;
         left:0;    元素相对于定位位置左侧距离
         top:0;     元素相对于定位位置上侧距离
         right:0;   元素相对于定位位置右侧距离
         bottom:0;  元素相对于定位位置下侧距离

注意：通常偏移量只需要用俩个就可以对一个元素进行定位（一般选择水平方向的一个偏移量和一个垂直方向偏移量来为元素进行定位）

四、开启相对定位注意点

1、开启相对定位，如果没有设置偏移量，元素的位置是不会发生变化的。

2、相对定位的原点是元素原本在文档流中位置。

3、开启相对定位后，元素的等级会提高。

4、开启相对定位， 元素不会脱离文档流，即元素的性质不会改变。(也就是块元素还是块元素，行内元素还是行内元素)

五、绝对定位

position:absolute;      偏移量(可正可负)
         left:0;    元素相对于定位位置左侧距离
         top:0;     元素相对于定位位置上侧距离
         right:0;   元素相对于定位位置右侧距离
         bottom:0;  元素相对于定位位置下侧距离

六、开启绝对定位后，元素的特点有哪些？

1、开启绝对定位后的元素会脱离文档流。即元素的性质会发生变化。(块元素不会独占一行了，行内元素也可以设置宽高了等)

2、开启绝对定位后，如果希望元素的位置发生变化，依然需要设置偏移量。

3、绝对定位是相对于其包含块来发生偏移。一般情况，如果给元素开启一个绝对定位，同时也会给其父元素开一个相对定位，我们管这种情况叫“父相子绝”。

4、绝对定位也会提高元素的等级。

七、什么是包含块

1、在没有定位的时候，包含块就是其父元素。

2、如果有定位的时候，包含块就是离元素最近的开启了定位的祖先元素；如果没有其祖先元素都没有开启定位，其包含块就是html根标签，所以我们管html也叫初始包含块。

八、固定定位

position:fixed;      偏移量(可正可负)
         left:0;    元素相对于html根标签左侧距离
         top:0;     元素相对于html根标签上侧距离
         right:0;   元素相对于html根标签右侧距离
         bottom:0;  元素相对于html根标签下侧距离

补充：固定定位的应用场景一般位于顶部导航，侧边导航和广告栏...

九、开启固定定位后，元素的特点有哪些？

1、开启固定定位后的元素会脱离文档流。即元素的性质会发生变化。(块元素不会独占一行了，行内元素也可以设置宽高了等)

2、固定定位一直是参照html根标签来发生偏移的。

3、开启固定定位后，元素不会根据滚动条滚动而滚动。

十、粘滞定位

position:sticky;      偏移量(可正可负)
         left:0;    元素相对于html根标签左侧距离
         top:0;     元素相对于html根标签上侧距离
         right:0;   元素相对于html根标签右侧距离
         bottom:0;  元素相对于html根标签下侧距离

补充：粘滞定位的应用场景一般位于导航、侧边导航...

十一、开启粘滞定位后，元素的特点有哪些？

1、开启粘滞定位，元素不会脱离文档流，元素的性质也不会发生变化。

2、开启粘滞定位，一般配合top值使用。在没有到达top值的时候，元素是随着滚动条滚动而滚动的；当到达top值的时候，就不会随着滚动条滚动而滚动了。

3、粘滞定位也是参照html根标签来偏移的。

十二、几个定位间的区别？

开启相对定位和粘滞定位，元素不会脱离文档流，即元素的性质不会改变。(也就是块元素还是块元素，行内元素还是行内元素)；开启绝对定位和固定定位，元素会脱离文档流，即元素的性质会发生变化。(块元素不会独占一行了，行内元素也可以设置宽高了等)。

相对定位是相对于其原点来发生偏移；绝对定位是相对于其包含块来发生偏移；而固定定位和粘滞定位是相对于html根标签来发生偏移。