深入理解CSS定位与层叠

深入理解CSS定位与层叠攻略

在CSS设计中，定位与层叠是非常重要的概念。本文将介绍定位和层叠的概念、使用方法以及应用技巧，同时提供两个示例说明。

定位

CSS定位是指通过使用position属性和对应的值来确定元素在文档流中的位置。定位属性有4种值：

• static
• relative
• absolute
• fixed

static

默认的元素定位方式。元素在文档流中按照HTML文档中的顺序进行排列。

relative

相对定位。元素相对于其最初的位置进行偏移，偏移值通过top、bottom、left、right等属性进行设置。

absolute

绝对定位。元素脱离文档流，相对于其最近的已定位的父级元素进行定位，如果没有已定位的父级元素，则相对于body元素进行定位。同样使用top、bottom、left、right等属性进行设置。

fixed

固定定位。元素脱离文档流，相对于浏览器窗口进行定位，同样使用top、bottom、left、right等属性进行设置。

层叠

CSS层叠是指CSS属性的优先级处理过程。CSS属性具有优先级，当一个元素的多个属性为其设置了相同的值时，就需要按照优先级进行处理。优先级从最高到最低分别是：

• !important
• 行内样式
• ID选择器
• 类选择器/属性选择器/伪类选择器
• 标签选择器/伪元素选择器
• 通配符/子选择器/后代选择器

!important

使用!important可以将样式设置为最高优先级，强制覆盖其它样式。此方法尽可能少用，只要优先级设计得当就可以避免使用。

示例一：伪类选择器和类选择器的层叠效果

在以下HTML代码中，一个a标签既设置了伪类选择器:hover样式，也设置了类选择器.yellow样式：

<a href="#" class="yellow">I am a link</a>

此时在CSS中设置如下样式：

a:hover {
  color: red;
}

.yellow {
  color: yellow;
}

我们会发现，当鼠标悬浮在a标签上时，文字变成了红色，而当鼠标离开时字体颜色回到了黄色。这是因为伪类选择器具有高于类选择器的优先级。如果将.yellow样式设置为!important，则该样式会覆盖伪类选择器:hover的样式。

示例二：z-index的层叠效果

在HTML中，z-index属性用于控制元素的层级关系。此属性只在定位元素上起作用，如果两个元素具有相同的z-index，后出现的元素会覆盖先出现的元素。如下代码：

<div class="first"></div>
<div class="second"></div>

在CSS中，设置如下属性：

.first {
  position: absolute;
  z-index: 1;
}

.second {
  position: absolute;
  z-index: 2;
}

则第二个元素会在第一个元素上方。如果将两个元素的z-index设置为相同，则后出现的元素会覆盖先出现的元素。