CSS Position详解-优快云博客

CSS:position

position拥有三种定位机制：静态定位、相对定位、绝对定位

position属性可设置4个属性值：

static（静态定位）

relative（相对定位）

absolute（绝对定位）

fixed（固定定位）

为什么会有四个呢？因为absolute和fixed都属于绝对定位

下面这个表格是w3cschool对position的解释

属性值	描述
static	默认值。没有定位，元素出现在正常的流中。（忽略top、left、bottom、right、z-index声明）
relative	生成相对定位的元素，相对于其正常位置进行定位。left:20会向元素的LEFT位置添加20像素。
absolute	生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left,top,right,bottom属性进行定位。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left,top,right,bottom属性进行定位。
inherit	从父元素继承position属性的值。

相对定位

特点：

相对于自身原有位置进行偏移
仍处于标准文档流中
随机拥有偏移属性和z-index属性

绝对定位

特点：

建立了以包含快为基准的定位
完全脱离了标准文档流
随机拥有偏移属性和z-index属性

1、没有设置偏移量：无论是否存在已定位祖先元素，都保持在元素初始位置。脱离了标准文档流。

没有已定位祖先元素

.box1{
	background-color:red;
	height:300px;
}
.box2{
	background-color:green;
	height:100px;
	position:absolute;
}
.box3{
	background-color:blue;
	height:200px;
}
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

有已定位祖先元素
.box1{
	background-color:red;
	height:300px;
}
.box2{
	background-color:green;
	height:100px;
	position:absolute;
}
.box3{
	background-color:blue;
	height:200px;
}
.box{
	position:relative;
	height:60px;
	background-color:#FC0;
}
<div class="box1">box1</div>
<div class="box">
  <div class="box2">box2</div>
</div>
<div class="box3">box3</div>

这两种情况结果相同。无论是否存在已定位祖先元素，都保持在元素初始位置。

2、设置了偏移量

偏移参照基准：

若无已定位祖先元素，以<html>为偏移参照基准。

.box1{
	background-color:red;
	height:300px;
}
.box2{
	background-color:green;
	height:100px;
	position:absolute;
	top:20px;
	left:50px;
}
.box3{
	background-color:blue;
	height:200px;
}
.box{
	height:60px;
	background-color:#FC0;
}
<div class="box1">box1</div>
<div class="box">
  <div class="box2">box2</div>
</div>
<div class="box3">box3</div>

有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准

.box1{
	background-color:red;
	height:300px;
}
.box2{
	background-color:green;
	height:100px;
	position:absolute;
	top:20px;
	left:50px;
}
.box3{
	background-color:blue;
	height:200px;
}
.box{
	height:60px;
	background-color:#FC0;
	position:relative;
}
.wrap{
	height:400px;
	background-color:#999;
	position:absolute;
	width:80%;
}

<div class="wrap">
  <div class="box1">box1</div>
  <div class="box">
    <div class="box2">box2</div>
  </div>
  <div class="box3">box3</div>
</div>

3、absolute与fixed的相同点