CSS定位布局
一、定位布局简介
在上一章，我们学习了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个属性来设置元素相对浏览器的位置。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS绝对定位</title>
<style type="text/css">
#father{
padding: 15px;
background-color: #0C6A9D;
border: 1px solid silver;
}
#father div{
padding: 10px;
border: 1px dashed red;
background-color: aquamarine;
}
#son2{
/*这里设置son2的定位方式*/
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div id="son3">box3</div>
</div>
</body>
</html>
预览效果：
设置son2的定位方式：
#son2
{
/*在这里添加son2的定位方式*/
position:absolute;
top:0;
right:0;
}
预览效果：
五、CSS静态定位static
如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。
说白了，平常我们根本就用不到“position:static”，不过呢，如果有时候我们使用javascript来控制元素定位的时候，如果想要使得其他定位方式的元素变成静态定位，就要使用“position:static;”来实现。
参考文章：https://blog.csdn.net/wuyxinu/article/details/103583618