CSS定位布局
一、定位布局简介
CSS定位使你可以将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动，能够创建多种高级而精确地布局。
定位的方法有很多种，它们分别是固定定位（fixed）、相对定位（relative）、绝对定位（absolute）和静态定位（static）。
二、CSS固定定位fixed
固定定位是最直观而最容易理解的定位方式，当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。
语法：
position:fixed;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;
说明：
“position:fixed;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:fixed;”使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。
top、bottom、left和right这4个属性不一定全部都用到。❗ 注意: 这4个值的参考对象是浏览器的4条边。
三、CSS相对定位relative
采用相对定位的元素，其位置是相对于它的原始位置计算而来的。相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。采用相对定位的元素会获得相应的空间。
语法：
position:relative;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
说明：
“position:relative;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:relative;”使得元素成为相对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对原始位置。相对定位的容器浮上来后，其所占的位置仍然留有空位，后面的无定位元素仍然不会“挤上来”。
❗ 在这里要非常清楚这一点：默认情况下，CSS相对定位元素的位置是相对于原始位置而言，而CSS固定定位元素的位置是相对浏览器而言！
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#father{
margin-top: 30px;
margin-left: 30px;
border: 1px solid silver;
background-color: cadetblue;
}
#father div{
width: 100px;
height: 60px;
border: 1px solid silver;
background-color: aquamarine;
}
#son2{
/*这里设置son2的定位方式*/
}
</style>
</head>
<body>
<div id="father">
<div id="son1">第1个无定位的div元素</div>
<div id="son2">相对定位的div元素</div>
<div id="son3">第2个无定位的div元素</div>
</div>
</body>
</html>
预览效果：
设置son2的定位方式：
#son2
{
/*这里设置son2的定位方式*/
position:relative;
top:20px;
left:40px;
}
预览效果：
四、CSS绝对定位absolute
当元素的position属性值为absolute时，这个元素就变成了绝对定位元素。绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地把元素移动到任意你想要的位置。
一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，它是独立出来的。
语法：
position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
说明：
“position:absolute;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:absolute;”使得元素成为绝对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。
❗ 参照物选择条件：上级元素中有定位(position)属性的；并且找的是最近的那个有定位属性的父级。
查找参照物的顺序： 先找父级元素，如果有定位属性（position）就以这个父级元素作为参照物发生偏移，如果没有找到就向外层逐一查找，直到找到有position属性的元素，如果一直都没有，那么就以最外层的html元素为参照物发生偏移
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS绝对定位</title>
<style type="text/css">
.box1{
width: 400px;
height: 300px;
margin: 50px auto;
background-color: #0C6A9D;
border: 1px solid silver;
}
.box2{
width: 300px;
height: 200px;
margin: 50px auto;
border: 1px dashed red;
background-color: aquamarine;
}
.box3{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</body>
</html>
预览效果：
设置box2的定位属性：
.box2{
width: 300px;
height: 200px;
margin: 50px auto;
border: 1px dashed red;
background-color: aquamarine;
position: relative;
}
预览效果：
五、CSS静态定位static
如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。
说白了，平常我们根本就用不到“position:static”，不过呢，如果有时候我们使用javascript来控制元素定位的时候，如果想要使得其他定位方式的元素变成静态定位，就要使用“position:static;”来实现。
内容整理自网络，侵删。
