1、定位
定位是将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位可以让元素固定屏幕中的某个位置，并且可以压住其他盒子。
定位=定位模式+边偏移。定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。
定位模式通过CSS的position属性来设置，它的值可以分为四个：static(静态定位)，relative（相对定位），absolute（绝对定位），fixed（固定定位）。
边偏移有top、bottom、left、right四个属性。
2、常见的定位
它有五个不同的位置值：static、relative、fixed、absolute、sticky。
1）静态定位 position: static
静态定位是元素的默认定位方式，无定位的意思。静态定位按照标准流特征摆放位置，他没有边偏移，不受 top、bottom、left 和 right 属性的影响。很少使用。
2）相对定位 position: relative
position: relative;的元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
当它存在父级元素时，它也是相对于在父级元素的初始位置进行偏移。
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。其余内容不会进行调整来适应元素留下的任何空间。
3）绝对定位 position: absolute
position: absolute;的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
此时父元素root没有定位元素，我们如果设置child元素的绝对定位，其移动位置就是相对于body。
如果父元素root设置了定位，则其移动位置就是相对于父元素。
如果祖先元素有定位，则以最近一级的定位为参考点来移动位置。 如果最近的一级父元素没有，则再向上一级去查找，如果都没有定位，就以浏览器为准。
绝对定位是脱离标准流的，不再占有原来的位置。这也就意味着，父元素不能加绝对定位，如果加了绝对定位父元素下的布局就会占用父元素的位置，页面的结构就会乱掉。因此，父元素的布局需要占有位置，要使用相对定位，而子元素可以使用相对定位，就可以在父元素内部自由移动了。
absolute 脱离文档流，通过 top,bottom,left,right 定位。
4）固定定位 position: fixed
position: fixed;的元素是相对于视口定位的，这意味着即使滚动页面，元素固定于浏览器的可视区的位置，在浏览页面的时候元素的位置不变。 top、right、bottom 和 left 属性用于定位此元素。固定定位的元素不会在页面中放置的位置上留出空隙。
固定定位的特点：以浏览器的可视化窗口为参考点移动元素，跟父元素没有任何关系，不随滚动条滚动，固定定位不再占有原来的位置。
5）粘性定位 position: sticky
以浏览器的可视化窗口为参考点移动元素，根据用户的滚动位置进行定位，占有原来的位置；必须加上top、left、right、bottom中的一个才有效。
position: sticky粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
网友评论