CSS重點-定位 隨學筆記
阿新 • • 發佈：2021-11-03
CSS重點-定位 position
為什麼需要定位？ 有些效果，標準流或浮動都無法快速實現，此時需要定位來實現： 1.浮動可以讓多個塊級盒子一行沒有縫隙排列顯示，經常用於橫向排列盒子。 2.定位則是可以讓盒子自由的在某個盒子內移動位置或固定螢幕中某個位置，並且可以壓住其他盒子。 定位組成： 定位：將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子。 定位=定位模式 + 邊偏移 *定位模式用於制定一個元素在問當中的定位方式。邊偏移則決定了該元素的最終位置。 定位模式： 定位模式決定元素的定位方式，他通過CSS的position屬性來設定，其值可以分為四個： 引數： static 靜態定位 relative 相對定位 absolute 絕對定位 fixed 固定定位 邊偏移： 邊偏移就是定位的盒子移動到最終位置。有top、bottom、left和right四個屬性。 引數： 屬性 示例 描述 top top：80px 頂端偏移量，定義元素相對於其父元素上邊線的距離。 bottom bottom: 80px 底部偏移量，定義元素相對於其父元素下邊線的距離。 left left：80px 左側偏移量，定義元素相對於其父元素左邊線的距離。 right right：80px 右側偏移量，定義元素相對於其父元素右邊線的距離。 （一）靜態定位 靜態定位是元素的預設定位方式，無定位的意思。 語法： 選擇器：{ position： static; } 靜態定位按照標準流特性擺放位置，它沒有邊偏移。 這種定位在不居中很少使用。 （二）相對定位 相對定位是元素在移動位置的時候，是相對於他原來的位置來說的。（自戀型） 語法： 選擇器{ position：relative; } 特點（重要）： 1.它是相對於自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。 2.原來在標準流的位置繼續佔有，後面的盒子仍然以標準流的方式對待他，（不脫標，繼續保留原來的位置） 因此，相對定位並沒有脫標，他最典型的應用是給絕對定位當爹的。 （限制絕對定位）<style> .box1 { position: relative; top: 100px; left: 100px; width: 200px; height: 200px; background-color: aqua; } .box2 { width: 200px; height: 200px; background-color: brown; }</style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body>
（三）絕對定位
絕對定位是元素在移動位置的時候，是相對於它的祖先元素來說的（拼爹型）。 語法： 選擇器 { position： absolute; } 絕對定位的特點（重點）: 1.如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準定位（Docutment文件） 2.如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。 3.絕對定位不再佔有原來的位置（脫標）。<style> .son { position: absolute; /* top: 0; left: 0; */ top: 100px; right: 200px; width: 200px; height: 200px; background-color: brown; } .father { /* 祖先元素有定位 */ /* position: relative; */ width: 500px; height: 500px; background-color: chartreuse; } .box { position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: coral; } </style> </head> <body> <div class="son"></div> <div class="father"> <div class="box"></div> </div> </body>
（四）固定定位
固定定位是元素固定於瀏覽器可視區的位置。主要使用場景：可以在瀏覽器頁面滾動時元素的位置不會改變。 語法： 選擇器 { position： fixed； } 特點（重要）: 1.以瀏器的可視視窗為參照點移動元素。 注意： (1).跟父元素沒有任何關係。 (2).不隨滾動條滾動。 2.固定定位不佔由原來的位置。 固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對定位。<style> .dj { position: fixed; top: 100px; left: 40px; } </style> </head> <body> <div class="dj"> <img src="images/pvp.png"> </div> </body>固定定位小技巧：固定在版心右側 小演算法： 1.讓固定定位的盒子left：50% 走到瀏覽器可視區（版心）的一半位置。 2.讓固定定位的盒子margin-left：版心寬度的一半距離。 多走版心寬度的一半位置，就可以讓固定定位的盒子貼著版心右側對齊了。 ------------------------------------------------------------------------------------------------------------------------------------- 子絕父相的由來： 子絕父相：通俗的講就是自己是絕對定位的話，父級要用相對定位。 注意： 1.子級用絕對定位，不會佔有位置，可以放到父盒子裡面的任何一個地方，不會影響其他的兄弟盒子。 2.父盒子需要加定位限制子盒子在父盒子內顯示。 3.父盒子佈局時，需要佔有位置，因此父親只能是相對定位。 這就是子絕父相的由來，所以相對定位經常用來作為絕對定位的父級。 總結：因為父級需要佔有位置，因此是相對定位，子盒子不需要佔有位置，則是絕對定位。 粘性定位（瞭解）： 粘性定位可以被認為是相對定位和固定定位的混合。Sticky 粘性的 語法： 選擇器 { position：sticky;top: 10px; } 特點： 1.以瀏覽器的可視視窗作為參照點移動元素（固定定位的特點）； 2.粘性定位佔有原先的定位（相對定位的特點）； 3.必須新增top、left、right、bottom中的一個才有效。 跟頁面滾動搭配使用，相容性較差，IE不支援。
<style> body { height: 3000px; } .nav { position: sticky; top: 0px; width: 800px; height: 50px; background-color: coral; margin: 100px auto; } </style> </head> <body> <div class="nav">我是導航欄 </div> </body>
*定位的疊放次序 z-index
在使用定位佈局時，可能會出現盒子重疊的情況。此時，可以使用z-index來控制盒子的前後次序（z軸） 語法： 選擇器 { z-index：1; } 注意： 數值可以是正整數、負整數或0，預設是auto，數值越大，盒子越靠上； 如果屬性值相同，則按照書寫順序，後來居上； 數字後面不能加單位； 只有定位的盒子才有z-index屬性。 定位的拓展： 1.絕對定位的盒子水平垂直居中： 加了絕對定位的盒子不能通過margin：0 auto 水平居中，但是可以通過以下計算方法實現水平和垂直居中： left：50%； margin-left：盒子一半寬度的負值 top：50%； margin-top：盒子高度一半的負值<style> .box { position: absolute; width: 200px; height: 200px; background-color: aqua; margin: auto; } </style> </head> <body> <div class="box"></div> </body>2.定位特殊特性 絕對定位和固定定位也和浮動類似。 (1).行內元素新增絕對或者固定定位，可以直接設定高度和寬度。 (2).塊級元素新增絕對或者固定定位，如果不給寬度或者高度，預設大小是內容的大小。 --> 3.脫標的盒子不會觸發外邊距塌陷 浮動元素、絕對定位（固定定位）元素都不會觸發外邊距合併的問題 --> 4.絕對定位（固定定位)會完全壓住盒子 浮動元素不同，只會壓住它下面標準流的盒子，但是不會壓住下面標準流盒子裡的文字（圖片），但絕對定位（固定定位）會壓住下面標準流所有的內容。 浮動之所以不會壓住文字，是因為浮動產生的目的最初是為了做文字環繞效果的。文字會圍繞浮動元素。