css -- 定位 · 前端知識 -- 學習整理

[TOC] >[success] # css 定位 >[danger] ##### relative 相對定位 1. 使用相對定位，位置從自身出發。 2. 還占據原來的位置。 3. 行內元素使用相對定位不能轉行內塊 4. left、right、top、bottom用來設置元素的具體位置 5. 定位參照對象是元素自己原來的位置 ![](https://img.kancloud.cn/e7/83/e7831bce290283744d0116cfa6ddfa53_544x237.png) ~~~ html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outer>div{ display: inline-block; } .outer > :nth-child(2){ position: relative; top: 14px; left: 2px; width: 100px; } </style> </head> <body> <div class="outer"> <span>元素1</span> <div>23</div> <div>元素2</div> </div> <div>11111111111</div> </body> </html> ~~~ >[danger] ##### 固定定位 -- fixed 1. 固定定位之后，不占據原來的位置（脫標） 2. 元素使用固定定位之后 ,定位參照對象是視口(即可視區域), 當畫布滾動時，固定不動 3. 元素使用固定定位之后，會轉化為行內塊 >[danger] ##### absolute -- 絕對定位 1. 元素使用絕對定位之后不占據原來的位置（脫標） 2. 元素使用絕對定位，位置是從瀏覽器出發。 3. 嵌套的盒子，父盒子沒有使用定位，子盒子絕對定位，子盒子位置是從瀏覽器出發。 4. 嵌套的盒子，父盒子使用定位，子盒子絕對定位，子盒子位置是從父元素位置出發。 5. 給行內元素使用絕對定位之后，轉換為行內塊。（不推薦使用，推薦使用display:inline-block;）注：因此才會出現`子絕父相`,但是實際上來說父元素也可以是其他定位元素例如`絕對定位`，只是相對來說`子絕父相`更常見 * 關于絕對定位寬度和高度 1. 定位參照對象的寬度 = left + right + margin-left + margin-right + 絕對定位元素的實際占用寬度 2. 定位參照對象的高度 = top + bottom + margin-top + margin-bottom + 絕對定位元素的實際占用高度 ~~~ html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outer{ position: relative; width: 500px; height: 200px; background-color: aqua; } .outer > div{ position: absolute; width: 200px; background-color: red; left: 80px; right: 0; margin-right:40px; margin-left:40px; } </style> </head> <body> <div class="outer"> <div>23</div> </div> </body> </html> ~~~ ![](https://img.kancloud.cn/87/6c/876c2632f016f22c5e7d6789212c6386_621x238.png) ![](https://img.kancloud.cn/9e/6f/9e6f48862ff78b601b45ed1b05a7e351_290x231.png) `margin:0 auto` 只能讓標準流的盒子居中對齊,現在絕對定位已經脫離標準盒子，此時想定位就可以利用上面的公式，只要去設置left: 0、right: 0、top: 0、bottom: 0、margin: auto 和盒子具體寬度，對應調整這些屬性即可控制居中位置 ![](https://img.kancloud.cn/74/70/7470dcb653e6e9231525470b6a1197a1_561x251.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outer{ position: relative; width: 500px; height: 200px; background-color: aqua; } .outer > div{ position: absolute; width: 200px; background-color: red; left: 0; right: 0; bottom: 0; margin: 0 auto; } </style> </head> <body> <div class="outer"> <div>23</div> </div> </body> </html> ~~~ >[success] # 粘性定位 - sticky 1. 可以看做是相對定位和固定定位的結合體 2. 它允許被定位的元素表現得像相對定位一樣，直到它滾動到某個閾值點(top,bottom.left.right) 3. 當達到這個閾值點時, 就會變成固定定位 4. sticky是相對于最近的滾動祖先包含視口的(the nearest ancestor scroll container’s scrollport ) 如圖 ![](https://img.kancloud.cn/52/fd/52fdf9dbd49ba9c8d41e23ff94ccb80f_327x177.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outer{ width: 100px; margin: 0 auto; height: 100px; overflow: scroll; } .outer > .footer{ position: sticky; bottom: 0; // 閾值點 } </style> </head> <body> <div class="outer"> <div>23</div> <div>23</div> <div>23</div> <div>23</div> <div>23</div> <div>23</div> <div class="footer">1111</div> </div> </body> </html> ~~~