固定定位 

 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>

 

posted @ 2019-07-19 16:56  zuiaimiusi  阅读(178)  评论(0)    收藏  举报