css--相对/绝对/固定/层级定位

定位

关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

  • relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
  • absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
  • fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
  • static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
  • inherit 从父元素继承 position 属性的值

定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

典型定位布局
1、固定在顶部的菜单
2、水平垂直居中的弹框
3、固定的侧边的工具栏
4、固定在底部的按钮

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>定位</title>
 9 
10     <style type="text/css">
11 
12         .con{
13             width:400px;
14             height:400px;
15             border:1px solid black;
16             margin:50px auto 0;
17             position:relative; /*.box1的父级元素定位*/
18         }
19 
20         .con div{
21             width:200px;
22             height:100px;
23             background-color:gold;
24             margin:20px;
25             text-align:center;
26             line-height:100px;
27             font-size:40px;
28         }
29 
30         body .box1{  /* 权重加大，将背景色置为green*/
31             background-color:green;
32             /* 相对定位 position:relative;   */
33             /* 绝对定位 position:absolute;   */
34             position:fixed;  /* 固定定位 */
35             top:50px;
36             left:50px;
37         }
38 
39         /*绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素*/
40         .con1{
41             background-color:pink;
42             position:absolute;
43             top:100px;
44             left:100px;
45          }
46 
47     </style>
48 </head>
49 <body>
50 
51 <div class="con">
52     <div class="box1">1</div>
53     <div class="box2">2</div>
54     <div class="box3">3</div>
55 </div>
56 <br>
57 <div class="con1">第四个盒子</div>
58 
59 </body>
60 </html>

相对定位：

绝对定位：

相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>层级定位</title>
 9 
10     <style type="text/css">
11 
12         .con{
13             width:400px;
14             height:400px;
15             border:1px solid black;
16             margin:50px auto 0;
17             position:relative; /*.box1的父级元素定位*/
18         }
19 
20         .con div{
21             width:200px;
22             height:100px;
23             background-color:gold;
24             margin:20px;
25             text-align:center;
26             line-height:100px;
27             font-size:40px;
28             position:absolute;
29         }
30 
31 
32         body .box1{
33             background-color:green;
34             z-index:10;
35         }
36 
37         body .box2{
38             background-color:pink;
39             top:50px;
40             left:50px;
41             }
42 
43         body .box3{
44             top:100px;
45             left:100px;
46         }
47     </style>
48 </head>
49 <body>
50 
51 <div class="con">
52     <div class="box1">1</div>
53     <div class="box2">2</div>
54     <div class="box3">3</div>
55 </div>
56 
57 </body>
58 </html>

未设置z-index:10

 

 

设置了z-index:10

posted on 2019-11-07 22:51  cherry_ning  阅读(1244)  评论(0)    收藏  举报

导航