04定位 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         .innerDiv{
 9             width: 100px;
10             height: 100px;
11             border: 1px solid rgb(136, 232, 135);
12             /* 元素展示方式
13             display: inline;   inline 行内元素宽高设置失效 */
14         }
15 
16         .d1{
17             background-color: rgb(229, 237, 162);
18             position: absolute;
19             top: 100px;
20             right: 100px;
21         }
22 
23         .d2{
24             background-color: rgb(249, 215, 170);
25         }
26 
27         .d3{
28             background-color: rgb(176, 176, 238);
29         }
30 
31         /*
32             position:
33                 static 默认定位
34                 absolute 绝对定位
35                 reLative 相对定位：相对元素原本的位置，原本位置不会被别的元素占用，不会跟着页面走
36                 fixed 相对定位：相对浏览器窗口的位置，原本位置会被别的元素占用，会跟着页面走
37             left
38             right
39             top
40             bottom
41         */
42 
43     </style>
44 </head>
45 <body>
46 
47     <div class="innerDiv d1">div1</div>
48     <div class="innerDiv d2">div2</div>
49     <div class="innerDiv d3">div3</div>
50 
51 </body>
52 </html>

 

posted @ 2024-03-08 15:52  白茶花约  阅读(7)  评论(0)    收藏  举报