2018-7-29 css17- 定位position
- 相對定位，relative
- 絕對定位，absolute，脫標
- 絕對定位-子絕父相：子元素用絕對定位, 父元素用相對定位。企業開發中常用。實現覆蓋效果。
- 絕對定位-水平居中
- 固定定位，fixed，脫標
- 靜態定位，默認的標準流
- z-index屬性，控制定位流元素的覆蓋關係，從父現象
轉自HTML+CSS - 文集 - 簡書
自學請參考CSS 教程
【相對定位】
相對定位就是相對於自己以前在標準流中的位置來移動
格式
position: relative;
注意：
- 相對定位是不脫離標準流的, 會繼續在標準流中佔用一份空間
- 在相對定位中同一個方向上的定位屬性只能使用一個
- top/bottom 只能用一個
- left/right 只能用一個
- 由於相對定位是不脫離標準流的, 所以在相對定位中區分塊級元素/行內元素/行內塊級元素
- 由於相對定位是不脫離標準流的, 並且相對定位的元素會佔用標準流中的位置, 所以當給相對定位的元素設置margin/padding等屬性的時會影響到標準流的布局
代碼
<style> *{ margin: 0; padding: 0; } div{ width: 150px; height: 40px; } .box1{ background-color: red; } .box2{ background-color: green; position: relative; top: 20px; left: 20px; margin-top: 20px; } .box3{ background-color: blue; } .box4{ background-color: yellow; } </style></head><body><h1 >六言詩·給彭德懷同志</h1><div class="box1"><p > 山高路遠坑深，</p></div><div class="box2"><p > 大軍縱橫馳奔。</p></div><div class="box3"><p > 誰敢橫刀立馬？</p></div><div class="box4"><p > 唯我彭大將軍。</p></div></body>
效果
說明：
- 第二句，由於top: 20px;left: 20px;，所以相對原來位置向下移動20px，向右移動了20px
- margin-top: 20px;，第二句原來位置距離第一句設置上邊距20px，所以第二句總共距離第一句移動了40px
相對定位應用場景：
- 用於對元素進行微調（例如：兩個標籤對齊。當然也可以通過把2個標籤浮動來實現對齊。）
- 配合後面學習的絕對定位來使用
【絕對定位】
絕對定位就是相對於body或者某個定位流中的祖先元素來定位
格式
position: absolute;
注意點:
- 絕對定位的元素是脫離標準流的, 不會佔用標準流中的位置。類似浮動。
- 由於絕對定位的元素是脫離標準流的, 所以絕對定位的元素不區分塊級元素/行內元素/行內塊級元素，可以設置寬高。
- 如果一個絕對定位的元素是以body作為參考點, 那麼其實是以網頁首屏的寬度和高度作為參考點，而不是以整個網頁的寬度和高度作為參考點
- 相對於body定位會隨著頁面的滾動而滾動
- 一個絕對定位的元素會忽略祖先元素的padding
絕對定位參考點:
- 默認情況下所有的絕對定位的元素，無論有沒有祖先元素, 都會以body作為參考點
- 如果一個絕對定位的元素有祖先元素（不僅限於父元素），並且祖先元素中有一個是定位流中的元素（設置了position），那麼這個絕對定位的元素就會以定位流的那個祖先元素作為參考點
- 只要是這個絕對定位元素的祖先元素都可以
- 指的定位流是指絕對定位/相對定位/固定定位
- 定位流中只有靜態定位不行
- 如果一個絕對定位的元素有祖先元素，並且祖先元素中有多個是定位流中的元素，那麼這個絕對定位的元素會以離它最近的那個定位流的祖先元素為參考點
例子
<style> *{ margin: 0; padding: 0; } div{ width: 150px; height: 40px; } .box1{ background-color: red; } .box2{ background-color: green; position: absolute; top: 20px; left: 20px; } .box3{ background-color: blue; } .box4{ background-color: yellow; } </style></head><body><h1 >六言詩·給彭德懷同志</h1><div class="box1"><p > 山高路遠坑深，</p></div><div class="box2"><p > 大軍縱橫馳奔。</p></div><div class="box3"><p > 誰敢橫刀立馬？</p></div><div class="box4"><p > 唯我彭大將軍。</p></div></body>
效果
說明：
- 第二句設置了絕對定位，類似浮動，所以後面詩句上移。
- 因為第二句詩父元素是body，不存在祖先元素是定位流中元素的情況，所以它相對body移動了top: 20px; left: 20px;
【絕對定位-子絕父相】
子絕父相：子元素用絕對定位, 父元素用相對定位。企業開發中常用。
相對定位和絕對定位一般都是用來做覆蓋效果的，當看到某個元素覆蓋在另外一個元素上時, 第一時間就要想到定位流。
企業開發中一般相對定位和絕對定位都是一起出現, 很少單獨使用，先看下面例子。
例子1，原始代碼
<style> *{ margin: 0; padding: 0; } h1{ text-align: center; margin-top: 80px; } ul{ list-style: none;/*去除列表標記*/ width: 800px; height: 50px; margin: 0 auto; margin-top: 80px; background-color: red; } ul li{ float: left;/*浮動後實現水平排版*/ width: 150px; line-height: 50px;/*撐起行高，同時讓文字垂直居中*/ text-align: center;/*文字水平居中*/ background-color: #ccc; } ul li:nth-of-type(4){ /*了利用序選擇器單獨設置第四句*/ background-color: yellow; }</style></head><body><h1 >六言詩·給彭德懷同志</h1><ul> <li>山高路遠坑深，</li> <li>大軍縱橫馳奔。</li> <li>誰敢橫刀立馬？</li> <li>唯我彭大將軍。 <img src="../images/hot.png" alt=""> </li></ul></body>
效果
例子2，hot圖片相對定位，然後移動位置
<style> *{ margin: 0; padding: 0; } h1{ text-align: center; margin-top: 80px; } ul{ list-style: none;/*去除列表標記*/ width: 800px; height: 50px; margin: 0 auto; margin-top: 80px; background-color: red; } ul li{ float: left;/*浮動後實現水平排版*/ width: 150px; line-height: 50px;/*撐起行高，同時讓文字垂直居中*/ text-align: center;/*文字水平居中*/ background-color: #ccc; } ul li:nth-of-type(4){ /*了利用序選擇器單獨設置第四句*/ background-color: yellow; } ul li img{ /* 相對定位弊端: 相對定位不會脫離標準流, 會繼續在標準流中佔用一份空間, 所以不利於布局界面 */ position: relative;/*不脫離標準流*/ left: -60px; top: -20px; }</style></head><body><h1 >六言詩·給彭德懷同志</h1><ul> <li>山高路遠坑深，</li> <li>大軍縱橫馳奔。</li> <li>誰敢橫刀立馬？</li> <li>唯我彭大將軍。 <img src="../images/hot.png" alt=""> </li></ul></body>
效果
說明：
- 通過相對定位，把圖片設置到第四局上方指定位置
- 但是由於是相對定位，不脫離標準流，圖片移動走後，原來佔用的位置空間依然保留
- 所以第四句詩句只是在自己佔用空間內居中（也就是黃色部分空間150px-圖片初始位置佔用空間或者說圖片寬度24px。），而不是在整個黃色部分居中。
相對定位弊端：相對定位不會脫離標準流，會繼續在標準流中佔用一份空間, 所以不利於布局界面
例子3，hot圖片絕對定位，然後移動位置
<style> *{ margin: 0; padding: 0; } h1{ text-align: center; margin-top: 80px; } ul{ list-style: none;/*去除列表標記*/ width: 800px; height: 50px; margin: 0 auto; margin-top: 80px; background-color: red; } ul li{ float: left;/*浮動後實現水平排版*/ width: 150px; line-height: 50px;/*撐起行高，同時讓文字垂直居中*/ text-align: center;/*文字水平居中*/ background-color: #ccc; } ul li:nth-of-type(4){ /*了利用序選擇器單獨設置第四句*/ background-color: yellow; } ul li img{ position: absolute; left: 965px; top: 195px; }</style></head><body><h1 >六言詩·給彭德懷同志</h1><ul> <li>山高路遠坑深，</li> <li>大軍縱橫馳奔。</li> <li>誰敢橫刀立馬？</li> <li>唯我彭大將軍。 <img src="../images/hot.png" alt=""> </li></ul></body>
效果
說明：
- 此時可以發現第四句完全居中
- 由於圖片採用絕對定位，類似浮動，所以不存在類似相對定位佔用空間問題。
- 但是採用絕對定位也會有問題，例如：瀏覽器變大或者變小，圖片就會從現在位置移動走。
絕對定位弊端：默認情況下絕對定位的元素會以body作為參考點，所以會隨著瀏覽器的寬度高度的變化而變化
企業開發中，不會單獨採用相對定位或者絕對定位來調整位置。
例4，子絕父相
<style> *{ margin: 0; padding: 0; } h1{ text-align: center; margin-top: 80px; } ul{ list-style: none;/*去除列表標記*/ width: 800px; height: 50px; margin: 0 auto; margin-top: 80px; background-color: red; } ul li{ float: left;/*浮動後實現水平排版*/ width: 150px; line-height: 50px;/*撐起行高，同時讓文字垂直居中*/ text-align: center;/*文字水平居中*/ background-color: #ccc; } ul li:nth-of-type(4){ /*了利用序選擇器單獨設置第四句*/ background-color: yellow; position: relative; } ul li img{ position: absolute; left: 65px; top: -8px; }</style></head><body><h1 >六言詩·給彭德懷同志</h1><ul> <li>山高路遠坑深，</li> <li>大軍縱橫馳奔。</li> <li>誰敢橫刀立馬？</li> <li>唯我彭大將軍。 <img src="../images/hot.png" alt=""> </li></ul></body>
效果
說明：
- 黃色部分，父元素<li>設置相對定位，不脫離標準流，位置不會發生變化
- 子元素<img>設置絕對定位，由於父元素<li>設置了定位，所以<img>位置就是以<li>為參考點。也就是說<img>的初始位置就是黃色部分的左上角。
- 此時，即使瀏覽器大小發生變化，由於<img>位置跟隨<li>，所以也就沒有上面例子中出現的問題了。
【絕對定位-水平居中】
如何讓絕對定位的元素水平居中？
1.設置絕對定位元素的left：50%
2.設置絕對定位元素的 margin-left: -元素寬度的一半px。
例子，上面代碼中，修改<img>的CSS代碼，同樣可以實現居中效果
ul li img{ position: absolute; left: 50%; top: -12px;}
【固定定位】
固定定位和前面學習的背景關聯方式很像（參見2018-7-25 css10-背景和精靈圖），背景關聯方式可以讓某個圖片不隨著滾動條的滾動而滾動， 而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動。
格式
position: fixed;
注意點:
- 固定定位的元素是脫離標準流的, 不會佔用標準流中的空間
- 固定定位和絕對定位一樣不區分行內/塊級/行內塊級
- IE6不支持固定定位
固定定位應用場景:
- 網頁對聯廣告
- 網頁頭部通欄(穿透效果)
【靜態定位】
默認情況下標準流中的元素position屬性就等於static, 所以靜態定位其實就是默認的標準流
靜態定位應用場景:
- 一般用於配合JS清除定位屬性
【z-index屬性】
默認情況下所有的元素都有一個默認的z-index屬性，取值是0。
z-index屬性的作用是專門用於控制定位流元素的覆蓋關係的。
定位元素的覆蓋關係:
- 默認情況下定位流的元素會蓋住標準流的元素
- 默認情況下定位流的元素後面編寫的會蓋住前面編寫的
- 如果定位流的元素設置了z-index屬性, 那麼誰的z-index屬性比較大, 誰就會顯示在上面
注意點：從父現象
- 如果兩個元素的父元素都沒有設置z-index屬性, 那麼誰的z-index屬性比較大誰就顯示在上面
- 如果兩個元素的父元素設置了z-index屬性, 那麼子元素的z-index屬性就會失效, 也就是說誰的父元素的z-index屬性比較大誰就會顯示在上面
推薦閱讀：
※在創建table表格時，當心「神秘人」改了你的代碼，而你卻不知道！
※CSS定位的4件注意事項
※CSS常用布局學習
※CSS選擇器、層疊、繼承的那些事
※自製jQuery
TAG:CSS |