CSS-定位算法

CSS定位算法主要是指通过CSS属性来控制元素在页面中的位置，常用的定位属性包括position, top, right, bottom, left, 以及 z-index。

1. position属性：

   • static：默认值，无定位。
   • relative：相对定位，相对于其正常位置进行定位。
   • absolute：绝对定位，相对于最近的非static定位父元素进行定位。
   • fixed：固定定位，相对于浏览器窗口进行定位。
   • sticky：粘性定位，根据用户的滚动位置在相对和固定定位之间切换。

2. top, right, bottom, left属性：

   用来指定元素相对于其最近的定位父元素的偏移量。

3. z-index属性：

   用来控制元素的堆叠顺序，值大的元素将会覆盖值小的元素。

实例代码：

/* 相对定位 */
.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
}
 
/* 绝对定位 */
.absolute-box {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
/* 固定定位 */
.fixed-box {
  position: fixed;
  bottom: 0;
  left: 0;
}
 
/* 粘性定位 */
.sticky-box {
  position: sticky;
  top: 0;
}

HTML结构：

<div class="relative-box">相对定位</div>
<div class="absolute-box">绝对定位</div>
<div class="fixed-box">固定定位</div>
<div class="sticky-box">粘性定位</div>