日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

CSS元素定位

作者：梁峯 更新時間： 2022-11-09 編程語言

定位

position

? 定位是一種更高級的布局手段

? 通過定位可以可以將元素擺放到頁面的任意位置

文章目錄

  • 定位
    • 相對定位
    • 絕對定位
    • 固定定位
    • 粘滯定位
    • 絕對元素的定位
    • 元素的層級（z-index）

position:static;	/*默認值，元素是靜止的沒有開啟定位*/
position:relative;	/*開啟元素的相對定位*/
position:absolute;	/*開啟元素的絕對定位*/
position:fixed;		/*開啟元素的固定定位*/
position:static;	/*開啟元素的粘滯定位*/

相對定位

當position屬性值為relative時則開啟了元素的相對定位

position:relative;
left:100px;
top:-100px;
  1. 元素開啟相對定位以后，如果不設置偏移元素不會發生任何的變化
  2. 相對定位是參照與元素在文檔流中的位置進行定位
  3. 相對定位會提升元素的層級
  4. 相對定位不會使元素脫離文檔流
  5. 相對定位不會改變元素的性質（塊還是塊，行內還是行內）
  • 偏移量（offset）：通過偏移量設置元素的位置
    • right/left
      • 定位元素和定位位置的左/右側距離
      • 通常情況下我們只會使用其中之一
      • left/right越大元素越向右/左移動
    • top/bottom
      • 定位元素和定位位置上/下邊的距離
      • 通常情況下我們只會使用其中之一
      • top/bottom越大元素越向下/上移動

絕對定位

當position屬性值為absolute時則開啟了元素的相對定位

position:absolute;
left:100px;
top:200px;
  1. 開啟絕對定位后，如果不設置偏移量元素的位置不會發生變化
  2. 開啟絕對定位后，元素定位會從文檔流中脫離
  3. 絕對定位會改變元素的性質，行內變成塊，塊的寬高被內容撐開
  4. 絕對定位會使元素提升一個層級
  5. 絕對定位元素時先對于其包含快進行定位的

  • 包含塊 （containing blok）

    • 絕對定位的包含塊

      • 離它最近的開啟了定位的祖先元素（非pasition:static;）
      • 若所有的祖先元素都沒有開啟定位則根元素就是它的包含塊

    • <html>(根元素、初始包含塊)

固定定位

當position屬性值為fixed時則開啟了元素的相對定位

position:fixed;
left:100px;
top:200px;
  1. 也是一種絕對定位，大部分特點與絕對定位一樣
  2. 不同點：
    • 固定定位永遠參考瀏覽器的視口進行定位
    • 不會隨網頁的滾動條的滾動條滾動而滾動

粘滯定位

當position屬性值為sticky時則開啟了元素的相對定位

position:sticky;
top:10px;//滾動后固定在距離top10px的位置

IE不行

  1. 和相對定位基本一致，不同的是粘滯定位可以在元素到達某個位置時將其固定

絕對元素的定位

水平布局

left+marrgin-left+border-left+padding-left+width+padding-right+border-right+marrgin-right+right=包含塊內容區的寬度

當我們開啟了絕對定位后:

  • 水平方向的布局等式就需要添加left和right兩個值
    • 此時規則和之前一樣只是多添加了兩個值
    • 當發生過度約束：
      • 如果九個值中沒有auto則自動調整right值以使等式滿足
      • 如果有auto，則自動調整auto的值以使等式滿足
    • 可以設置auto的值
      • margin、width、left、right
    • 因為left和right的默認值使auto，則當等式不滿足切為默認值時，會自動調整這兩個值
  • auto優先級：偏移量>寬高>外邊距

垂直方向上布局的等式也必須滿足

top+margin-top+boder-top+padding-top+height+padding-bottom+boder-bottom+margin-bottom+bottom=包含塊的高度

.box{
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}/*在包含塊中垂直、水平居中*/

元素的層級（z-index）

對于開啟了定位元素，可以通過z-index屬性來指定元素的層級

? z-index需要一個整體作為參數，值越大越蘇的層級越高，越優先顯示

  • 如果元素層級一樣，則優先顯示（結構上HTML）靠下的元素
  • 祖先的元素層級再高也不會蓋住后代元素

原文鏈接：https://blog.csdn.net/m0_61219786/article/details/124484641

欄目分類
最近更新