一、固定定位
固定定位 (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的位置都没有发生改变。