CSS定位技术详解

一、基础概念

1、CSS定位是一种通过调整元素在网页中的位置和大小来控制页面布局的技术。

2、常用的CSS定位技术包括相对定位、绝对定位、固定定位和粘附定位。

3、CSS定位涉及到的属性包括position、top、bottom、left、right、z-index等。

二、相对定位

1、相对定位是相对于元素在正常文档流中的位置进行定位。

2、相对定位不会使其他元素的位置发生改变。

3、相对定位的元素可以使用top、bottom、left、right属性调整位置。

<div style="position:relative;top:20px;left:50px;">
  <p>这是相对定位的元素</p>
</div>

三、绝对定位

1、绝对定位是相对于最近的已定位祖先元素进行定位，如果没有已定位祖先元素，则相对于body元素。

2、绝对定位会使其他元素的位置发生改变。

3、绝对定位的元素可以使用top、bottom、left、right属性调整位置。

<div style="position:relative;">
  <div style="position:absolute;top:20px;left:50px;">
    <p>这是绝对定位的元素</p>
  </div>
</div>

四、固定定位

1、固定定位是相对于视口进行定位。

2、固定定位的元素不会随着页面滚动而移动。

3、固定定位的元素可以使用top、bottom、left、right属性调整位置。

<div style="position:fixed;top:20px;left:50px;">
  <p>这是固定定位的元素</p>
</div>

五、粘附定位

1、粘附定位是一种新型的定位方式，可以让元素在距离某个特定位置一定范围内保持不动，超出该范围后跟随滚动。

2、粘附定位的元素必须设置position为sticky。

3、粘附定位的元素可以使用top、bottom、left、right属性调整位置，同时还可以设置距离某个特定元素一定的距离。

<div style="position:sticky;top:20px;left:50px;float:right;">
  <p>这是粘附定位的元素</p>
</div>

六、z-index 属性

1、z-index 属性确定元素的堆叠顺序。

2、具有较高 z-index 值的元素会覆盖具有较低 z-index 值的元素。

3、z-index 的默认值是 auto，意味着元素的堆叠顺序将基于元素在正常文档流中的出现顺序。

<div style="position:relative;z-index:1;">
  <p>这是z-index值为1的元素</p>
</div>
<div style="position:relative;z-index:2;">
  <p>这是z-index值为2的元素</p>
</div>