CSS深入理解之position定位

1、什么是定位？

CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定position属性。他们也有不同的工作方式，这取决于定位方法。

有四种不同的定位方法。

属性值

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

2、absolute绝对定位 

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗，而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。与相对定位不同，绝对定位是脱离原文档流的。

2.1 块级元素的绝对定位

*{
	margin: 0;
	padding:0;
}
	body{
	position: relative;
}
	.box1,.box2,.box3{
	/*没有设置宽度*/
	height: 100px;
}
	.box1{
	background: red;
}
.box2{
	background: orange;
	position: absolute;
	left: 100px;
	top: 100px;
}
.box3{
	background: gray;
}

<div class="box1">dtyjkrtyj</div>
<div class="box2">good morning hi</div>
<div class="box3">rytjsdrty</div>

给第二个box添加了绝对定位，这个box只能根据body进行定位偏移，并且box3出现在原本box2的位置上。css中都没有给box添加宽度，而没有添加绝对定位的box长度为100%（相对定位的元素也是100%），而box2宽度为auto，在这里随着标签里的文字长度而变化。

2.2 行内元素的绝对定位

*{
	margin: 0;
	padding:0;
}
body{
	position: relative;
}
.box1,.box2,.box3{
	width: 100px;
	height: 100px;
}
	.box1{
	background: red;
}
.box2{
	background: orange;
	position: absolute;
	left: 100px;
	top: 100px;
}
.box3{
	background: gray;
}

<span class="box1">dtyjkrtyj</span>
<span class="box2">good morning</span>
<span class="box3">rytjsdrty</span>

 

在添加绝对定位之前，宽度和高度对行内元素不起作用，而box2添加了绝对定位，则box2由行内元素变成块级元素，并进行偏移
3、relative相对定位 

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

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

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

　　（1）微调元素

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

relative 表现的和 static 一样，除非你添加了一些额外的属性。

在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

4、fixed固定定位 

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。令人惊讶地是移动浏览器对 fixed 的支持很差。