CSS中的position:relative;的作用示例介绍

下面是关于CSS中position:relative;的作用示例介绍的详细攻略。

1. 什么是position:relative;？

在CSS中，使用position属性可以指定一个元素在文档中的定位方式，一共有四种值可选：static、relative、absolute、fixed。其中，position:relative;表示相对定位，它的特点是相对于元素原来的位置进行定位，而不是相对于文档绝对定位。

2. position:relative;的作用

当设置一个元素为position:relative;时，它会在文档中占据原来的位置，并在原来位置的基础上进行定位，定位的方式可以通过top、bottom、left、right四个属性进行控制。

在使用position:relative;时，元素的定位不会脱离文档流，也就是说，其他元素的布局不会因为它的定位位置而受到影响。

3. position:relative;示例介绍

下面将给出两个position:relative;的示例，以便更好地理解它的作用。

示例一

HTML代码如下：

<div class="box">
  <img src="example.jpg" alt="示例图">
  <div class="desc">示例说明</div>
</div>

CSS样式如下：

.box {
  position: relative;
}
.desc {
  position: absolute;
  top: 0;
  right: 0;
}

在上面的示例中，div元素.box设置了position:relative;，表示相对定位。同时，内部元素.desc设置了position:absolute;，表示绝对定位。通过设置top和right属性值，可以让.desc元素相对于.box元素的右上角进行定位。最终的效果是：图片上方会出现一个说明框。

示例二

HTML代码如下：

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS样式如下：

.box {
  position: relative;
}
.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}
.right {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;
  left: 50px;
}

在上面的示例中，div元素.box设置了position:relative;，表示相对定位。同时，内部元素.left设置了position:absolute;，表示绝对定位。通过设置width和height属性值，可以让.left元素占据一定的宽度和高度。内部元素.right设置了position:relative;，表示相对定位。通过设置left属性值，可以让.right元素相对于.box元素的左侧进行定位。最终的效果是：两个元素会在.box元素内部进行布局，.left元素在左侧，.right元素在右侧并向左偏移了50px。

总结

以上就是关于CSS中position:relative;的作用示例介绍的详细攻略，它主要的作用是让元素相对于原来位置进行定位。在实际应用中，我们可以通过设置top、bottom、left、right属性值，来控制元素的定位效果。