CSS中的定位介绍

CSS 的定位指的是通过一系列的属性设置来控制 HTML 元素的位置，可以将元素放置在页面的任意位置，并且可以通过这些属性进行更加精细的调整定位。这篇文章将对 CSS 中的定位进行详细的介绍，包含了定位的基本概念、定位的属性类型、relative 和 absolute 定位、fixed 定位、sticky 定位以及定位的常用实践。

## 定位的基本概念

在 CSS 中，定位指的是 HTML 元素在页面上的位置，包括元素的左、上、右、下四个方向的位置。HTML 元素的默认定位方式是静态定位，元素位置是由 HTML 文档流决定的，也就是按照元素在 HTML 源代码中出现的顺序放置在页面上。但是，CSS 还提供了其他三种定位方式，它们分别是相对定位、绝对定位和固定定位。

## 定位的属性类型

在 CSS 中，定位属性分为两种类型，一种是容器属性，另一种是元素属性。容器属性用于控制包裹元素的盒子的定位，是通过设置盒子的 position 属性值来实现的；元素属性用于控制元素的定位，是通过设置元素的 top、bottom、left 和 right 属性来实现的。

容器属性主要包括：

- position：用于设置包裹元素的定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。

- top、bottom、left、right：用于设置元素相对于包裹元素或相对于视口（针对固定定位）的位置。

元素属性主要包括：

- top、bottom、left、right：用于设置元素相对于包裹元素的位置。

- z-index：用于设置元素的叠放顺序。

## 相对定位和绝对定位

相对定位和绝对定位是 CSS 中最常用的两种定位方式。

### 相对定位

相对定位指的是相对于元素本身原来的位置进行定位。相对定位通过设置元素的 position 属性为 relative 来实现。相对定位的定位方式是相对于元素在文档中的默认位置进行定位，而不是相对于包含它的块级元素或者文档本身。

相对定位可以使用 top、bottom、left、right 四个属性来调整元素的位置。当设置 top 或 left 属性时，元素会相对于自身原来的位置往下或往右移动，正值表示向下或向右移动，负值表示向上或向左移动；当设置 bottom 或 right 属性时，元素会相对于自身原来的位置往上或往左移动，正值表示向上或向左移动，负值表示向下或向右移动。

相对定位可以使用 z-index 属性来控制元素的叠放顺序。叠放顺序是指元素在页面上的层级关系，具有更高 z-index 值的元素会覆盖在具有更低 z-index 值的元素的上面。如果没有指定 z-index 值，则 z-index 值默认为 0。

### 绝对定位

绝对定位指的是相对于包含元素进行定位。绝对定位通过设置元素的 position 属性为 absolute 来实现。绝对定位的定位方式是相对于包含它的元素进行定位，如果没有包含元素，则是相对于文档根元素（即 body 元素）进行定位。

绝对定位同样可以使用 top、bottom、left、right 四个属性来调整元素的位置。不同的是，当设置 top 或 left 属性时，元素会相对于包含它的元素的左上角往下或往右移动，正值表示向下或向右移动，负值表示向上或向左移动；当设置 bottom 或 right 属性时，元素会相对于包含它的元素的右下角往上或往左移动，正值表示向上或向左移动，负值表示向下或向右移动。

绝对定位同样可以使用 z-index 属性来控制元素的叠放顺序。

绝对定位元素的另一个特点是，它可以从包含块（即包裹元素）中脱离出来，并且不会影响其他元素的布局。当绝对定位元素的包裹元素的 position 属性设置为 static 时，绝对定位元素会相对于离它最近的设置了 position 为 relative、absolute 或者 fixed 的元素进行定位。如果没有这样的元素，则会相对于文档根元素进行定位。

## 固定定位

固定定位指的是相对于视口（即浏览器窗口）进行定位，不受页面滚动影响。固定定位通过设置元素的 position 属性为 fixed 来实现。在页面滚动时，固定定位元素会保持在视口的相对位置不变。

和绝对定位类似，固定定位也可以使用 top、bottom、left、right 四个属性来调整元素的位置。不同的是，固定定位元素的位置是相对于视口进行定位的，而不是相对于包裹元素。

固定定位同样可以使用 z-index 属性来控制元素的叠放顺序。

## 粘性定位

粘性定位是相对较新的定位方式，可以将元素“粘”在其父元素中的某个位置，直到它与视口发生冲突。粘性定位通过设置元素的 position 属性为 sticky 来实现。

粘性定位通常和相对定位一起使用，通过设置 top、bottom、left、right 四个属性来控制元素的位置。当元素跨过“粘性边界”时，它会“粘”在跨过的那一侧，直到它与另一侧的边界发生冲突，然后它会被推到另一侧，释放出来的空间是由它推出去的元素填补的。当元素被粘住时，它的定位方式被视为相对定位。

粘性边界可以通过设置 top、bottom、left、right 四个属性中的任意一个来实现。一个元素中可以存在多个粘性边界，这些粘性边界可以叠加在一起工作。

## 定位的常用实践

除了上述介绍的几种定位方式外，CSS 中还可以通过其他属性来实现定位的效果。下面是一些常用的定位实践。

### 设置元素居中显示

1. 在父元素上使用相对定位。

2. 设置要居中的子元素为绝对定位。

3. 设置子元素的 left 和 top 属性为 50%。

4. 设置子元素的 transform 属性的值为 translate(-50%, -50%)。

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

### 实现一个对话框

1. 创建一个绝对定