12-1 定位(相對，絕對，固定)

時間 2019-11-29

原文原文鏈接

一相對定位javascript

若是僅僅對當前盒子設置相對定位，那麼它與原來的盒子沒有任何變化、

只有一個做用：父相子絕
不要使用相對定位來作壓蓋現象

二種現象：
1.不脫標
2.形影分離
實例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>相對定位</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10         }
11         .box1{
12             background-color: red;
13         }
14         .box2{
15             background-color: black;
16             position: relative;
17             top: 200px;
18             left: 0px;
19         }
20         .box3{
21             background-color: yellow;
22         }
23     </style>
24 </head>
25 <body>
26 <div class="box1"></div>
27 <div class="box2"></div>
28 <div class="box3"></div>
29 </body>
30 </html>

View Code

二絕對定位css

現象：
   1.設置絕對定位的盒子，脫離標準流
參考點：

   1、單獨一個絕對定位的盒子

   1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置
   2.當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置。（愛立信）

   2、以父輩盒子做爲參考點
   1.父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點，這個父輩元素不必定是爸爸，它也能夠是爺爺，曾爺爺。

   2.若是父親設置了定位，那麼以父親爲參考點。那麼若是父親沒有設置定位，那麼以父輩元素設置定位的爲參考點

   3.不單單是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素爲參考點

   注意了：父絕子絕，沒有實戰意義，作站的時候不會出現父絕子絕。由於絕對定位脫離標準流，
   影響頁面的佈局。相反‘父相子絕’在咱們頁面佈局中，是經常使用的佈局方案。由於父親設置相對定位，
   不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。

   還要注意，絕對定位的盒子無視父輩的padding
設置絕對定位以後，margin:0 auto;不起任何做用，若是想讓絕對定位的盒子居中。
當作公式記下來 設置子元素絕對定位，而後left:50%; margin-left等於元素寬度的一半，
實現絕對定位盒子居中
實例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>絕對定位</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .father{
12             width: 500px;
13             height: 500px;
14             background-color: green;
15             position: relative;
16             /*向下走50px*/
17             top: 50px;
18             /*向右走100px*/
19             left: 100px;
20 
21         }
22         .father2{
23             width: 300px;
24             height: 300px;
25             background-color: yellow;
26             position: relative;
27             padding: 30px;
28             margin-left: 30px;
29             /*top: 10px;*/
30             /*left: 10px;*/
31         }
32         .box1{
33 
34 
35             width: 200px;
36             height: 200px;
37             background-color: red;
38             position: absolute;
39             top: 10px;
40             left: 10px;
41         }
42 
43     </style>
44 </head>
45 <body style="height: 2000px">
46 <div class="father">
47         <div class="father2">
48             <div class="box1">
49 
50             </div>
51         </div>
52 </div>
53 
54 
55 </body>
56 </html>

View Code

三固定定位html

固定當前的元素不會隨着頁面滾動而滾動java

特性: jquery

1.脫標 2.遮蓋，提高層級 3.固定不變瀏覽器

參考點：app

設置固定定位，用top描述。那麼是以瀏覽器的左上角爲參考點
若是用bottom描述，那麼是以瀏覽器的左下角爲參考點ide

做用： 1.返回頂部欄 2.固定導航欄 3.小廣告佈局

實例：作了一個固定導航欄spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>固定定位</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10 
11         }
12         body{
13             padding-top: 80px;
14         }
15         .head{
16             width: 100%;
17             height: 80px;
18             background-color: rgba(0,0,0,.5);
19             position:fixed;
20             top: 0;
21             left: 0;
22             z-index: 999;
23         }
24         .head p{
25              margin-left: 600px;
26         }
27         .wrapper{
28             width:100%;
29             height: 500px;
30             background-color: red;
31         }
32         .top{
33             width: 100px;
34             height: 100px;
35             background-color: black;
36             position: fixed;
37             bottom: 20px;
38             right: 20px;
39             line-height: 100px;
40             text-align: center;
41         }
42         body{
43             height: 2000px;
44         }
45 
46     </style>
47 </head>
48 <body>
49     <div class="head">
50         <p>導航欄</p>
51     </div>
52     <div class="wrapper">
53         中心內容
54         <p style="position: absolute; color: black;background-color: white;"></p>
55     </div>
56     <a href="#">
57         <div class="top">
58             返回頂部
59         </div>
60     </a>
61     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8">
62 
63     </script>
64 
65     <script type="text/javascript">
66         $('.top').click(function(){
67             $('html,body').animate({
68                 scrollTop: '0'
69             },2000);
70 
71             });
72 
73 
74 
75 
76 
77     </script>
78 </body>
79 </html>

View Code

四父相子絕案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>父相子絕案例</title>
 6     <style>
 7         *{
 8             padding:0;
 9             margin: 0;
10         }
11         input,button{
12             outline: none;
13             border: 0;
14         }
15         .search{
16             width: 296px;
17             height: 48px;
18             margin-left: 1000px;
19             margin-top: 81px;
20         }
21         .search form{
22             position: relative;
23         }
24         .search input[type='text']{
25             width: 223px;
26             height: 48px;
27             font-size: 14px;
28             border: 1px solid #e0e0e0;
29             padding: 0 5px;
30             position: absolute;
31         }
32         .search span{
33             font-size: 12px;
34             background: #EEEEEE;
35             padding: 0 5px;
36             position: absolute;
37             top:0;
38             right: 0;
39         }
40         .search span.t{
41             top: 20px;
42             right: 162px;
43             z-index: 2;
44 
45         }
46         .search span.s{
47             top: 20px;
48             right: 83px;
49             z-index: auto;
50         }
51         .search input[type='submit']{
52             height: 50px;
53             width: 50px;
54             border: 1px solid #e0e0e0;
55             background: #fff;
56             position: absolute;
57             right: 12px;
58             top: 0px;
59         }
60     </style>
61 </head>
62 <body>
63 <div class="search">
64     <form>
65         <input type="text" name=""><input type="submit" value="按鈕">
66         <span class="t">小米8</span>
67         <span class="s">小米MIX 2s</span>
68 
69     </form>
70 </div>
71 
72 </body>
73 </html>

View Code

五 z-index

<!--1.z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，-->
<!--2.只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，-->
<!--而浮動元素不能使用z-index-->
<!--3.z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，-->
<!--那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。-->
實例：z-index優先級判斷

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>z-index優先級</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin:0;
10         }
11         .box{
12             width: 500px;
13             height: 500px;
14             background-color: red;
15 
16             position: absolute;
17             left: 50%;
18             margin-left: -250px;
19             z-index: 20;
20         }
21         .box1{
22                 width: 300px;
23             height: 300px;
24             background-color: green;
25             position: absolute;
26             left: 50%;
27             margin-left: -150px;
28             z-index: 100;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="box"></div>
34     <div class="box1"></div>
35 
36 </body>
37 </html>

View Code

實例2 從父現象

<!--從父現象：父親慫了，兒子再牛逼也沒用,兒子的z-index會優先繼承父類的z-index-->

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>z-index從父現象</title>
 6     <style>
 7         .father1{
 8             position: relative;
 9             z-index: 20;
10         }
11         .father2{
12             position: relative;
13             z-index: 3;
14         }
15         .box{
16             width: 500px;
17             height: 500px;
18             background-color: red;
19 
20             position: absolute;
21             left: 50%;
22             margin-left: -250px;
23             z-index: 20;
24         }
25         .box2{
26             width: 300px;
27             height: 300px;
28             background-color: green;
29             position: absolute;
30             left: 50%;
31             margin-left: -150px;
32             z-index: 1000000;
33         }
34     </style>
35 </head>
36 <body>
37     <div class="father1">
38         <div class="box">
39 
40         </div>
41 
42     </div>
43 
44     <div class="father2">
45         <div class="box2">
46 
47         </div>
48     </div>
49 
50 </body>
51 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。