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
