HTML四种定位-固定定位

最新推荐文章于 2023-06-15 21:22:01 发布

短暂又灿烂的

最新推荐文章于 2023-06-15 21:22:01 发布

阅读量2.2k

点赞数 1

分类专栏：前端 css

本文链接：https://blog.csdn.net/weixin_42232156/article/details/121627526

版权

html css

前端同时被 2 个专栏收录

266 篇文章 11 订阅

订阅专栏

css

40 篇文章 0 订阅

订阅专栏

固定定位

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9         body{
10             height: 2000px;
11         }
12         .box1{
13             width: 200px;
14             height: 200px;
15             background-color: #bfa;
16            
17         }
18         .box2{
19             width: 200px;
20             height: 200px;
21             background-color: tomato;
22            /* 
23              固定定位：
24                -将元素的position属性设置为fixed则开启了元素的固定定位
25                -固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
26                -唯一不同的是固定定位永远参照于浏览器的视口进行定位
27                  固定定位的元素不会随网页的滚动条滚动
28            */
29          position: fixed;
30          left: 200px;
31          top: 200px;
32         }
33         .box3{
34             width: 200px;
35             height: 200px;
36             background-color: greenyellow;
37            
38         }
39         .box4{
40             width: 400px;
41             height: 400px;
42             background-color: rgb(47, 61, 255);
43           
44         }
45         .box5{
46             width: 300px;
47             height: 300px;
48             background-color: rgb(201, 14, 145);
49          
50            
51         }
52     </style>
53 </head>
54 <body>
55     <div class="box1">1</div>
56     <div class="box4">
57         4
58         <div class="box5">
59             5
60             <div class="box2">2</div>
61         </div>
62     </div>
63     
64     <div class="box3">3</div>
65 </body>
66 </html>
固定定位也是一种绝对定位

固定定位永远参照于浏览器的视口进行定位
 固定定位的元素不会随网页的滚动条滚动

固定定位也是一种绝对定位

固定定位永远参照于浏览器的视口进行定位

固定定位的元素不会随网页的滚动条滚动