CSS定位布局详解
- 1.CSS定位布局概述
- 2.固定定位：fixed
- 3.相对定位：relative
- 4.绝对定位：absolute
- 5.静态定位：static
1.CSS定位布局概述
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed）。相对定位（relative）。绝对定位（absolute）。静态定位（static）
这4种方式都是通过position属性来实现的，其中position属性取值如表：
2.固定定位：fixed
我们可以使用“position:fixed;”来实现固定定位。所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置
语法：
position:fixed;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
“position:fixed;”是结合top、bottom、left和right这4个属性一起使用的。其中，先使用“position:fixed;”让元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置
案例：
<!DOCTYPE html>
<html lang="utf-8">
<head>
<title></title>
<style>
#first {
width: 120px;
height: 1800px;
border: 1px solid gray;
line-height: 600px;
background-color: #B7F1FF;
}
#second {
position: fixed; /*设置元素为固定定位*/
top: 30px; /*距离浏览器顶部30px*/
left: 160px; /*距离浏览器左部160px*/
width: 60px;
height: 60px;
border: 1px solid silver;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="first">无定位的div元素</div>
<div id="second">固定定位的div元素</div>
</body>
</html>
我们尝试拖动浏览器的滚动条，其中，有固定定位的div元素不会有任何位置改变，但没有定位的div元素会发生位置改变
滚动前：
滚动后：
3.相对定位：relative
在CSS中，我们可以使用“position:relative;”来实现相对定位。所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的
语法：
position:relative;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;
“position:relative;”也是结合top、bottom、left和right这4个属性一起使用的，其中，先使用“position:relative;”让元素成为相对定位元素，接着使用top、bottom、left和right这4个属性来设置元素的相对定位
在默认情况下，固定定位元素的位置是相对浏览器而言的，而相对定位元素的位置是相对于原始位置而言的
案例1：默认情况下，元素有序排列：
<!DOCTYPE html>
<html lang="utf-8">
<head>
<title></title>
<style>
#father {
margin-top: 30px;
margin-left: 30px;
border: 1px solid silver;
background-color: lightskyblue;
}
#father div {
width: 100px;
height: 60px;
margin: 10px;
background-color: hotpink;
color: white;
border: 1px solid white;
}
#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>
我们为第2个div元素加入相对定位，CSS代码如下：
#son2 {
position: relative;
top: 20px;
left: 40px;
}
从这个例子可以看出，相对定位元素的top和left是相对于该元素的原始位置而言的，这一点和固定定位是不一样的
4.绝对定位：absolute
在CSS中，我们可以使用“position:absolute;”来实现绝对定位。绝对定位在几种定位方式中使用最为广泛，因为它能够很精确地把元素定位到任意你想要的位置
一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了
语法：
position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
“position:absolute;”是结合top、bottom、left和right这4个属性一起使用的，先使用“position:absolute”让元素成为绝对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置
默认情况下，固定定位和绝对定位的位置是相对于浏览器而言的，而相对定位的位置是相对于原始位置而言的
案例1：默认情况下，div有序排列：
<!DOCTYPE html>
<html lang="utf-8">
<head>
<title></title>
<style>
#father {
padding: 15px;
background-color: #0C6A9D;
border: 1px solid silver;
}
#father div {
padding: 10px;
}
#son1 {
background-color: #FCD568;
}
#son2 {
background-color: hotpink;
/*在这里添加son2的定位方式*/
}
#son3 {
background-color: lightskyblue;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div id="son3">box3</div>
</div>
</body>
</html>
我们为第2个div元素加入绝对定位，CSS代码如下：
#son2
{
position:absolute;
top:20px;
right:40px;
}
5.静态定位：static
在默认情况下，元素没有指定position属性时，这个元素就是静态定位的。也就是说，元素position属性的默认值是static
一般情况下，我们用不到“position:static”，不过在使用JavaScript来控制元素定位时，如果想要使元素从其他定位方式变成静态定位，就需要使用“position:static”来实现
