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

時間 2021-04-13

標籤 javascript css html java jquery 瀏覽器 app ide 佈局 spa 欄目系統網絡简体版

原文原文鏈接

一相對定位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 Codecss

二絕對定位html

現象：
   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 Codejava

三固定定位jquery

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

特性: app

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

參考點：佈局

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

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

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

 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