定位的使用（相對定位，絕對定位，z-index）

阿新 • • 發佈：2022-03-29

定位：

　　相對定位：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 }