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>