排版 网站,浙江省建设信息港三类人员成绩查询,公众号平台规则,佛山建站专家一、固定定位
固定定位 #xff08;position:fixed#xff09;其实是绝对定位的子类别#xff0c;一个设置了 position:fixed 的元素是相对于视窗固定的#xff0c;就算页面文档发生了滚动#xff0c;它也会一直待在相同的地方。
⚠️#xff1a;固定定位会脱离文档流。…一、固定定位
固定定位 position:fixed其实是绝对定位的子类别一个设置了 position:fixed 的元素是相对于视窗固定的就算页面文档发生了滚动它也会一直待在相同的地方。
⚠️固定定位会脱离文档流。
固定定位position:fixed
比较好理解所以我们直接通过练习来解释。
示例
headstylediv{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
bodydiv盒子1/divdiv盒子2/divdiv iddiv3盒子3(固定定位)/divdiv盒子4/divdiv iddiv5盒子5(固定定位)/divdiv盒子6/divdiv盒子7/div
/body
运行结果
①滚动前 ②滚动后 可以发现滚动前和滚动后盒子3、盒子5的位置都没有发生改变。
