定位和层叠的概念和作用-编程入门课：CSS(3)从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：CSS(3)从入门到实战

CSS是网页设计中最常用的语言之一，它可以帮助我们实现网页的各种布局和效果。其中，CSS定位和层叠是实现网页布局的两个重要概念。

一、CSS定位

CSS定位是指通过CSS来定义元素的位置和大小。常见的CSS定位方式有相对定位、绝对定位和固定定位。

相对定位
相对定位是指将元素相对于其原来的位置进行移动。相对定位的元素仍然占据文档流中的位置，只是在原来的位置上增加了一个偏移量。使用相对定位的元素可以通过top、bottom、left、right等属性来指定其偏移量。例如：

css
Copy code
<div style="position: relative; top: 20px; left: 30px;">相对定位</div>
上述代码中的div元素就是一个相对定位的元素。它被设置为相对定位，并且向下移动了20像素，向右移动了30像素。

绝对定位
绝对定位是指将元素相对于其父元素进行定位。绝对定位的元素会脱离文档流，不再占据任何位置。使用绝对定位的元素可以通过top、bottom、left、right等属性来指定其在父元素中的位置。例如：

```
<div style="position: relative;">
  <div style="position: absolute; top: 20px; left: 30px;">绝对定位</div>
</div>
```
上述代码中的第二个div元素就是一个绝对定位的元素。它被设置为绝对定位，并且相对于父元素向下移动了20像素，向右移动了30像素。

固定定位
固定定位是指将元素相对于浏览器窗口进行定位。固定定位的元素会脱离文档流，不再占据任何位置。使用固定定位的元素可以通过top、bottom、left、right等属性来指定其在窗口中的位置。例如：

```
<div style="position: fixed; top: 20px; left: 30px;">固定定位</div>
```
上述代码中的div元素就是一个固定定位的元素。它被设置为固定定位，并且相对于窗口向下移动了20像素，向右移动了30像素。

二、CSS层叠

CSS层叠是指在CSS中，如果多个样式规则应用到了同一个元素上，那么就需要根据优先级来确定哪个样式规则会被应用。通常，具有更高优先级的样式规则会覆盖具有较低优先级的样式规则。
CSS层叠的优先级可以根据以下几个因素来确定：

样式规则的来源
如果样式规则来自不同的来源，例如浏览器默认样式、外部样式表和内部样式表，那么来自不同来源的样式规则会按照特定的顺序进行层叠。

通常来说，浏览器默认样式的优先级最低，其次是外部样式表，再次是内部样式表，而最高优先级则是通过内联样式指定的样式规则。

选择器的特殊性
选择器的特殊性是指选择器的权重，权重越高，优先级就越高。选择器的特殊性可以通过以下方式计算：

对于每个ID选择器，将特殊性增加100。
对于每个类选择器、属性选择器和伪类选择器，将特殊性增加10。
对于每个元素选择器和伪元素选择器，将特殊性增加1。
对于通配符、组合器和选择器列表，不增加特殊性。
例如，以下选择器的特殊性分别是：

```
#myDiv        /* 特殊性为 100 */
.myClass      /* 特殊性为 10 */
a:hover      /* 特殊性为 11 */
div a        /* 特殊性为 2 */
*            /* 特殊性为 0 */
```
当多个选择器应用到同一个元素上时，选择器特殊性高的样式规则会覆盖特殊性低的样式规则。

样式规则的位置
如果多个样式规则应用到同一个元素上，但它们的特殊性相同，那么样式规则的位置就会决定哪个样式规则会被应用。通常情况下，后定义的样式规则会覆盖先定义的样式规则。

例如：

```
.myClass {
  color: red;
}

.myClass {
  color: blue;
}
```
在上述代码中，后一个样式规则定义的color属性会覆盖前一个样式规则定义的color属性，因为后一个样式规则的位置靠后。

小结：
CSS定位和层叠是实现网页布局的两个重要概念。通过掌握这些概念，我们可以更加灵活地布局网页，并且确保样式规则能够正确地应用到各个元素上。

该分类下的相关小册推荐：

编程入门课：HTML(5)从入门到实战