定位的使用（相对定位，绝对定位，z-index）

定位：

　　相对定位：position：relative  仍然在标准文档流中，原来位置会保留

　　相对于原来位置进行指定偏移

　　top、left、bottom、right

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             padding: 20px;
 9         }
10 
11         div{
12             margin: 10px;
13             padding: 5px;
14             font-size: 12px;
15             line-height: 25px;
16         }
17         #father{
18             border: 1px solid red;
19             padding: 0;
20         }
21         #first{
22             background: salmon;
23             border: 1px dashed #3cbda6;
24             position: relative;/*相对定位：上下左右*/
25             top: -20px;
26             left: 20px;
27         }
28         #second{
29             background: salmon;
30             border: 1px dashed #3cbda6;
31 
32         }
33         #third{
34             background: salmon;
35             border: 1px dashed #3cbda6;
36             position: relative;
37             bottom: -10px;
38             right: 20px;
39         }
40 
41     </style>
42 
43 </head>
44 <body>
45     <div id="father">
46         <div id="first">第一个盒子</div>
47         <div id="second">第二个盒子</div>
48         <div id="third">第三个盒子</div>
49 
50     </div>
51 </body>
52 </html>
相对定位

 

　　

　　方块定位示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         #box{
 9             width: 300px;
10             height: 300px;
11             padding: 10px;
12             border: 2px solid red;
13         }
14         a{
15             width: 100px;
16             height: 100px;
17             text-decoration: none;
18             background: #0093E9;
19             line-height: 100px;
20             text-align: center;
21             color: white;
22             display: block;
23         }
24         a:hover{
25             background: brown;
26         }
27         .a2,.a4{
28             position: relative;
29             left: 200px;
30             top: -100px;
31         }
32         .a5{
33             position: relative;
34             left: 100px;
35             top: -300px;
36         }
37     </style>
38 
39 </head>
40 <body>
41 
42 <div id="box">
43     <a class="a1" href="">链接1</a>
44     <a class="a2" href="">链接2</a>
45     <a class="a3" href="">链接3</a>
46     <a class="a4" href="">链接4</a>
47     <a class="a5" href="">链接5</a>
48 </div>
49 </body>
50 </html>
方块定位

 

　　绝对定位：

　　　　定位：基于xxx定位

　　　　1、没有父元素定位的前提下，默认按浏览器定位

　　　　2、假设父级元素存在定位，通常会相对父级元素进行偏移~

　　　　3、在父级元素范围内移动

　　　　相对于父级或浏览器的位置，进行指定偏移，绝对定位后，不在标准文档流，

　　　　原来的位置不会被保留　　

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             margin: 10px;
 9             padding: 5px;
10             font-size: 12px;
11             line-height: 25px;
12         }
13         #father{
14             border: 1px solid red;
15             padding: 0;
16             position: relative;
17         }
18         #first{
19             background: salmon;
20             border: 1px dashed #3cbda6;
21 
22         }
23         #second{
24             background: salmon;
25             border: 1px dashed #3cbda6;
26             position: absolute;/* */
27             right: 30px;
28             top: -10px;
29 
30 
31         }
32         #third{
33             background: salmon;
34             border: 1px dashed #3cbda6;
35 
36         }
37 
38     </style>
39 
40 </head>
41 <body>
42 <div id="father">
43     <div id="first">第一个盒子</div>
44     <div id="second">第二个盒子</div>
45     <div id="third">第三个盒子</div>
46 
47 </div>
48 </body>
49 </html>
绝对定位

　　

　　固定定位fixed：

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         body{
 9             height: 1000px;
10 
11         }
12         div:nth-of-type(1){
13             width: 100px;
14             height: 100px;
15             background: red;
16             position: absolute;
17             right: 0;
18             bottom: 0;
19         }
20 
21         div:nth-of-type(2){
22             width: 50px;
23             height: 50px;
24             background: yellow;
25             position: fixed;
26             right: 0;
27             bottom: 0;
28         }
29     </style>
30 </head>
31 <body>
32 
33 <div>div1</div>
34 <div>div2</div>
35 </body>
36 </html>
固定定位

 

　　

　　z-index：默认是0，最高无限 999

 背景透明：opacity = 0.5

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 
 8     <link rel="stylesheet" href="z-index.css">
 9 
10 </head>
11 
12 
13 <body>
14 
15 <div id="content">
16     <ul>
17         <li><img src="1.png" alt=""></li>
18         <li class="tipText">学习微服务</li>
19         <li class="tipBg"></li>
20         <li>时间：2022-03-29</li>
21         <li>地点：月球一号基地</li>
22     </ul>
23 </div>
24 </body>
25 </html>
z-index

 

 1 #content{
 2     width: 500px;
 3     padding: 0;
 4     margin: 0;
 5     overflow: hidden;
 6     font-size: 12px;
 7     line-height: 25px;
 8     border: 1px solid black;
 9 }
10 ul,li{
11    padding: 0;
12     margin: 0;
13    list-style: none;
14 }
15 /*父级元素*/
16 #content ul{
17     position:relative;
18 }
19 
20 .tipText,.tipBg{
21     position: absolute;
22     width: 500px;
23     height: 25px;
24     border: 1px solid red;
25     top: 200px;
26 }
27 .tipText{
28     /*层级默认为0*/
29     z-index: 999;
30 }
31 .tipBg{
32     background: salmon;
33     opacity: 0.5; /*背景透明度*/
34     /*filter: alpha(opacity=50); !*ie8以及更早版本支持替代的filter属性*!*/
35 }
z-index
posted @ 2022-03-29 11:37  doremi429  阅读(254)  评论(0)    收藏  举报