[2015-12-29]position详解

position属性的relative 和absolute定位有七种情况：

1.外层div用relative内层div用absolute

2.relative+absolute

3.两栏绝对定位（3、4对比）

4.两栏绝对定位定高

5.浮动

6.浮动列

7.清除浮动列

当设定position:absolute
1、如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位
2、如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。

当设定position: relative
则参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。

（如果设定margin：0 auto；网页自动居中就不能设置position浮动/绝地定位/float

自动居中一列布局需要设置 margin 左右值设置为 auto，而且一定要设置width为一个定值。）

情况一：

外层div加position:relative,内层div使用position:absolute

  外层div必须指定height，高度不能用百分比、

情况二：

position:relative + position:absolute

如果我们给 div-1 设置 relative 定位，那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位，就可以把 div-1a 移动到 div-1 的右上方。

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

情况三：（注意将情况三和四比较）

两栏绝对定位

现在就可以使用相对定位和绝对定位来做一个两栏布局了。

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

  

情况四：

 两栏绝对定位定高

种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合，因为一般我们不知道元素中会有多少文本，或者将要使用的精确的字号。

#div-1 {
 position:relative;
 height:250px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

情况五：浮动

对于可变高度的列来说，绝对定位就不起作用了，以下是另外一个方案。

我们可以浮动一个元素，使它移动到左边/右边，并且是文本环绕着它。这主要用于图像，但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工具)。

#div-1a {
 float:left;
 width:200px;
}

情况六：浮动列

如果我们把一个元素向左浮动，并且把第二个元素也向左浮动，they will push up against each other。

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

情况七：清除浮动列

在浮动元素之后，我们可以清除浮动来使其他元素正确定位。

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

属性：

1.position：static

    一般不用指定该属性，除非想覆盖之前的定位 ( 意味着元素没有被定位，而且在文档中出现在它应该在的位置。)

2.position:relative

    (实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了)

3.position:absolute

    （素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。）

4.position:fixed