一、定位
1、position:fixed 固定定位
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动:
特性
特性: 1.元素脱离正常文档流,不占位(也脱离文本流,全脱) 2.始终相对于浏览器窗口四个角为原点进行固定定位的 3.不会随页面的内容滚动而滚动 4.能使不能设置宽高的行级元素设置宽高 5.提升层级 6.如果没有定位偏移属性,对元素本身有影响;
应用场景:
相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏
注意:子元素设置绝对定位,父元素可以设置相对定位、绝对定位、固定定位, 这三种情况,参照元素都是父元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wrap { width: 300px; height: 300px; background-color: pink; /* position: relative; */ /* position: absolute; */ position: fixed; } .box1 { width: 100px; height: 100px; background-color: tomato; position: absolute; top: 100px; right: 50px; } </style> </head> <body> <!-- 这三种情况,子元素设置绝对定位,参照元素都是父元素 1.子绝父相(一般都用这个) 子元素设置绝对定位,父元素设置相对定位 2.子绝父绝 子元素设置绝对定位,父元素设置绝对定位 3.子绝父固 子元素设置绝对定位,父元素设置固定定位 --> <div class="wrap"> <div class="box1">box1</div> </div>