css定位布局详解_世界尽头与你的博客-爱代码爱编程
1.定位布局概述
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed）。相对定位（relative）。绝对定位（absolute）。静态定位（static）
2.固定定位：fixed
我们可以使用“position:fixed;”来实现固定定位。所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置。
以下演示一个固定定位的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMUSTCTF</title>
<style type="text/css">
#first {
width: 120px;
height: 1800px;
background-color: orange;
}
#second {
position: fixed;
top: 30px;
left: 160px;
width: 50px;
height: 50px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
</body>
</html>
我们尝试拖动浏览器的滚动条，其中，有固定定位的div元素不会有任何位置改变，但没有定位的div元素会发生位置改变
3.相对定位：relative
在CSS中，我们可以使用“position:relative;”来实现相对定位。所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMUSTCTF</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 10px;
}
/* 演示相对定位的效果 */
#show {
position: relative;
top: 20px;
left: 40px;
}
</style>
</head>
<body>
<div></div>
<div id="show"></div>
</body>
</html>
4.绝对定位：absolute
在CSS中，我们可以使用“position:absolute;”来实现绝对定位。绝对定位在几种定位方式中使用最为广泛，因为它能够很精确地把元素定位到任意你想要的位置
默认情况下，固定定位和绝对定位的位置是相对于浏览器而言的，而相对定位的位置是相对于原始位置而言的🙌
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMUSTCTF</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 10px;
}
/* 演示绝对定位的效果 */
#show {
position: absolute;
top: 20px;
left: 40px;
}
</style>
</head>
<body>
<div></div>
<div id="show"></div>
</body>
</html>
5.静态定位：static
在默认情况下，元素没有指定position属性时，这个元素就是静态定位的。也就是说，元素position属性的默认值是static