CSS Position(定位)

CSS Position(定位)
在CSS中，我们是通过定位属性position来进行定位的，具体它有如下几个属性值。常见的属性有如下几个值描述。
1. positon:static; 静态定位（默认的 ）

所有标准文档流中的元素都是静态定位
　　
2. positon:relative; 相对定位

不脱离标准文档流，“老家留坑，形影分离”

特点：如果设置了相对定位并且设置了top、left、right、bottom属性，那么将来盒子会以盒子原来所在的位置进行偏移

相对定位的用途：一般不用于做“压盖效果”，就两个作用：

（1）微调元素

（2）绝对定位的参考，子绝父相

可以用left、right来描述盒子右、左的偏移；可以用top、bottom来描述盒子下、上的偏移
example:

<div class="plat">123</div>
<div class="content">456</div>

在CSS中

*{
	margin:0;
	padding:0;
}
.plat{
	position:relative;
	top:100px;
	left:100px;
	background-color: yellow;
	width: 200px;
	height: 200px;
}
.content{
	background-color: red;
	width: 200px;
	height: 200px;
}

对div中的plat中的元素进行相对定位，position:relative,plat中的盒子保留了原来自己的位置进行移动，可是它原来的位置所占的空间还是保留的。所以红色的盒子不会霸占黄色盒子的位置。

3. position:absolute; 绝对定位

脱离标准文档流

特点：（1）如果这个元素没有父元素，那么将来top、left、right、bottom是相对于浏览器窗口来定位的

（2）如果绝对定位的元素有父元素，但父元素没有相对定位，那么这个时候top、left、right、bottom还是相对于浏览窗口来定位的

（3）如果绝对定位的元素有父元素，而且父元素有定位（非static），那么这个绝对定位的元素偏移是以自己的父元素为基础

（4）绝对定位之后的元素在页面上不会占据位置
　
　example

<div class="plat">123</div>
<div class="content">456</div>

*{
	margin:0;
	padding:0;
}
.plat{
	position:absolute;
	top:100px;
	left:100px;
	background-color: yellow;
	width: 200px;
	height: 200px;
}
.content{
	background-color: red;
	width: 200px;
	height: 200px;
}

对div中的plat中的元素进行绝对定位，position:absolute,plat中的盒子脱离了原来自己的位置进行移动，所以黄色盒子的位置就不会占位置。所以红色的盒子会霸占黄色盒子的位置。

4. position:fixed; 固定定位

脱离标准文档流

固定定位的用途：页面中的某些小广告，需要固定在页面中的一个位置不变
　　example:

<div class="content">8888</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

.content{
	position:fixed;
	right: 30px;
	width: 200px;
	height: 200px;
	background-color: gray;

}

position:fixed;是作用就是它可以固定一个元素，不管浏览区怎么页面怎么缩放，它的位置都是固定不变的。

总结：总结：将来在写页面的时候，用的最多的不是绝对定位也不是相对定位，而是绝对定位与相对定位一起使用

规范：子绝父相（子元素使用绝对定位，父元素使用相对定位）