css position: absolute、relative详解

CSS Position: Absolute和Relative详解

在CSS中position属性用于定义元素的定位类型。在position属性中有四个值：static(默认)、relative、absolute 和 fixed。

本篇攻略将详细介绍position属性中的absolute和relative，帮助您更好地理解和应用这两个定位类型。

Relative相对定位

相对定位是相对于元素原来在文档流中的位置进行定位，与元素周围的其他元素位置不会发生影响。即位置变动不会对其他元素造成影响。

示例1:

<div class="container">
  <div class="box1">Hello, how are you?</div>
  <div class="box2">I'm fine, thank you.</div>
</div>

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.box1 {
  position: relative;
  top: 50px;
  left: 50px;
  background-color: gray;
  width: 200px;
  height: 100px;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

上面代码中，我们通过position: relative；top: 50px；left: 50px；来将box1向下移动了50px，向右移动了50px，而box2没有发生位置变动。

示例2:

<div class="container">
  <div class="box1">Hello, how are you?</div>
  <div class="box2">I'm fine, thank you.</div>
</div>

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.box1 {
  position: relative;
  top: 50px;
  background-color: gray;
  width: 200px;
  height: 100px;
}

.box2 {
  position: relative;
  top: -50px;
  left: 100px;
  background-color: yellow;
  width: 100px;
  height: 100px;
}

上面代码中，我们通过position: relative；top: -50px；left: 100px；将box2向上移动了50px，向右移动了100px，而box1没有发生位置变动。

Absolute绝对定位

绝对定位是相对父元素（经过定位的元素）的位置进行定位。当父元素没有经过定位时，则相对于浏览器窗口定位。

示例1:

<div class="container">
  <div class="box1">Hello, how are you?</div>
  <div class="box2">I'm fine, thank you.</div>
</div>

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  position: relative;
}

.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: gray;
  width: 200px;
  height: 100px;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

上面代码中，我们通过position: absolute；top: 50px；left: 50px；让box1相对于父元素(container)的顶部和左侧各向下、向右跨越50px的距离。而box2没有发生位置变动。

示例2:

<div class="container">
  <div class="box1">Hello, how are you?</div>
  <div class="box2">I'm fine, thank you.</div>
</div>

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  position: relative;
}

.box1 {
  position: absolute;
  top: 50px;
  background-color: gray;
  width: 200px;
  height: 100px;
}

.box2 {
  position: absolute;
  top: 30px;
  left: 100px;
  background-color: yellow;
  width: 100px;
  height: 100px;
}

上面代码中，我们通过position: absolute；top: 30px；left: 100px；让box2相对于父元素(container)的顶部向下跨越30px的距离，与之相邻的box1也随之向下移动。而box2还向右跨越100px的距离，因此其完全出现在box1的右边。