相对定位和绝对定位-编程入门课：CSS(3)从入门到实战

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

CSS定位是一种重要的布局技术，可以用来控制网页中元素的位置和尺寸。CSS提供了两种主要的定位方式，即相对定位和绝对定位。在本文中，我们将介绍这两种定位方式的概念、语法和使用场景，并结合代码示例进行详细说明。

相对定位

相对定位是一种相对于元素原来的位置进行定位的方式。相对定位不会使元素脱离文档流，也不会影响其他元素的位置。相对定位可以通过CSS的position属性和top、bottom、left和right属性进行控制。

position属性可以设置为relative来启用相对定位。例如：

```
div {
  position: relative;
}
```
接下来，可以通过top、bottom、left和right属性来指定相对于原来位置的偏移量。例如：

```
div {
  position: relative;
  top: 20px;
  left: 30px;
}
```
在上述代码中，元素div将会相对于原来的位置向下偏移20像素，向右偏移30像素。这样，元素div的位置就发生了变化，但是其他元素的位置不受影响。

相对定位还可以用来实现一些特殊的效果，例如图片的浮动。例如：

```
img {
  position: relative;
  top: -20px;
  left: 20px;
}
```
在上述代码中，图片将会相对于原来的位置向上偏移20像素，向右偏移20像素。这样，图片就会向左下方浮动，同时保持在文档流中。

绝对定位

绝对定位是一种相对于最近的非static定位祖先元素进行定位的方式。绝对定位会使元素脱离文档流，并且可以在页面上自由移动。绝对定位可以通过CSS的position属性和top、bottom、left和right属性进行控制。

position属性可以设置为absolute来启用绝对定位。例如：

```
div {
  position: absolute;
}
```
接下来，可以通过top、bottom、left和right属性来指定相对于最近的非static定位祖先元素的偏移量。例如：

```
div {
  position: absolute;
  top: 20px;
  left: 30px;
}
```
在上述代码中，元素div将会相对于最近的非static定位祖先元素向下偏移20像素，向右偏移30像素。如果没有最近的非static定位祖先元素，则相对于文档的左上角进行定位。

绝对定位还可以用来实现一些复杂的布局效果，例如弹出层和导航菜单等。例如：

```
.nav-menu {
  position: absolute;
  top: 50px;
  left: 0;
  width:200px;
	background-color: #fff;
	z-index: 1000;
	display: none;
}
```

在上述代码中，.nav-menu元素设置了绝对定位，并通过top和left属性指定了相对于最近的非static定位祖先元素的偏移量，同时设置了宽度、背景颜色和z-index属性。这样，当用户点击导航菜单按钮时，就可以使用JavaScript代码将.nav-menu元素的display属性设置为block，从而显示出菜单。

小结

在本文中，我们介绍了CSS的相对定位和绝对定位的概念、语法和使用场景，并结合了代码示例进行详细说明。相对定位是一种相对于元素原来的位置进行定位的方式，不会使元素脱离文档流，适合用于微调元素位置和实现浮动效果。而绝对定位是一种相对于最近的非static定位祖先元素进行定位的方式，可以使元素脱离文档流，并适合用于实现复杂的布局效果，例如弹出层和导航菜单等。在实际开发中，我们需要根据具体的需求选择不同的定位方式，以实现最佳的布局效果。

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

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