前端学习Day13 CSS盒子的定位（固定定位篇“附练习”）
一、固定定位
固定定位 （position:fixed）其实是绝对定位的子类别，一个设置了 position:fixed 的元素是相对于视窗固定的，就算页面文档发生了滚动，它也会一直待在相同的地方。
⚠️：固定定位会脱离文档流。
固定定位：position:fixed
比较好理解所以我们直接通过练习来解释。
示例：
<head><style>div{width: 200px;height: 200px;background-color: gray;margin-bottom: 5px;}#div3{background-color: rgb(231, 185, 117);margin-bottom: 5px;position: fixed;left: 220px;top: 200px;}#div5{background-color: rgb(129, 235, 129);margin-bottom: 5px;position: fixed;left: 250px;top: 250px;}/* id选择器优先级高 */</style>
</head>
<body><div>盒子1</div><div>盒子2</div><div id="div3">盒子3(固定定位)</div><div>盒子4</div><div id="div5">盒子5(固定定位)</div><div>盒子6</div><div>盒子7</div>
</body>运行结果：
①滚动前
②滚动后
可以发现滚动前和滚动后，盒子3、盒子5的位置都没有发生改变。