元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动:
特性
特性: 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 { wid