1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <script type="text/javascript">
7 </script>
8 <style type="text/css">
9
10 .box2{
11 width: 200px;
12 height: 200px;
13 background-color: darkblue;
14 position: fixed;
15 left: 0px;
16 top: 0px;
17 }
18 /*
19 当元素的position属性设置fixed时，则开启了元素的固定定位
20 固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样 (脱离文档流 提升一个层级)
21 不同的是
22 1.固定定位永远都会相对于浏览器窗口进行定位
23 2.固定定位会固定在浏览器窗口的某个位置，不会随滚动条移动
24 */
25 .box3{
26 width: 200px;
27 height: 200px;
28 background-color: yellow;
29
30 }
31 .box1{
32 width: 300px;
33 height: 300px;
34 background-color: bisque;
35
36 }
37
38 </style>
39
40 </head>
41 <body style="height: 5000px;">
42 <div class="box1"></div>
43 <div class="box4" style="width:300px;height: 300px;background-color: orange;position: relative;">
44 <div class="box2"></div></div>
45 <div class="box3"></div>
46 </body>
47 </html>
