CSS定位-有解無憂

定位

將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子
- 定位=定位模式+邊偏移
- 定位模式用于指定一個元素在檔案中的定位方式，邊偏移則決定了該元素的最終位置
定位模式
- 定位模式決定了元素的定位方式，它通過css的position屬性來設定，其值可以分為四個：
  - 值語意
    
    static 靜態定位
    
    relative 相對定位
    
    absolute 絕對定位
    
    fixed 固定定位

值	語意
static	靜態定位
relative	相對定位
absolute	絕對定位
fixed	固定定位

邊偏移

邊偏移就是定位的盒子移動到最終位置，有top、bottom/left、right四個屬性

邊偏移屬性	示例	描述
top	top：80px；	頂端偏移量，定義元素相對于其父元素上邊線的距離
bottom	bottom：80px；	底部偏移量，定義元素相對于其父元素下邊線的距離
left	left：80px；	左側偏移量，定義元素相對于其父元素左邊線的距離
right	right：80px	右側偏移量，定義元素相對于其父元素右邊線的距離

靜態定位static
- 元素默認的定位方式，無定位的意思
- ```
選擇器{
position：static；
}
```
- 靜態定位按照標準流特性擺放位置，他沒有邊偏移
- 靜態定位在布局中很少使用
相對定位reative
- 元素在移動位置的時候，是相對于它原來的位置來說的
- ```
選擇器{
position：relative；
}
```
- 特點：
  - 他是相對于自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）
  - 原來在標準流的位置繼續占有，后面的盒子仍然以標準流的方式對待他，（不脫標，繼續保留原來的位置）
絕對定位absolute
- 相對于他的父元素來說
- ```
選擇器{
position：absoulute；
}
```
- 如果沒有父元素或者父元素沒有定位，則以瀏覽器為準定位（Document）
- 如果祖先元素有定位（相對、絕對，固定定位），則以最近一級的有定位父元素為參考點移動位置
子絕父相
- 子級是絕對定位的話，父級要用相對定位
  - 子級相對定位，不會占有位置，可以放到父盒子里面的任何一個地方
  - 父盒子需要加定位限制盒子在父盒子內顯示
  - 父盒子布局時，需要占有位置，因此父親只能是相對定位
固定定位fixed
- 元素固定在網頁的一個位置
- ```
選擇器{
position：fixed；
}
```
- 特點：
  - 以瀏覽器的可是視窗為參照點移動元素
  - 跟父元素沒有關系
  - 不跟隨滾動條滾動
  - 不占有原先的位置
    - 固定定位也是脫標的，其實固定定位也可以看作是一種特殊的絕對定位
- 固定定位小技巧：固定在版心的右側位置
  - 小演算法：
    - 讓固定定位的盒子left：100%，走到瀏覽器可視區域一半的位置
    - 讓固定定位的盒子margin-left；版心寬度的一般，就可以固定定位的盒子貼著版心右側對其了
粘性定位sticky
- 粘性定位可以被認為是相對定位和固定定位的混合
- ```
選擇器{
position：sticky；
top：10px；
}
```
- 特點
  - 以瀏覽器的可是視窗為參照點移動元素（固定定位的特點）
  - 粘性定位占有原先的位置（相對定位的特點）
  - 必須添加top、bottom、right、left其中的一個才有效

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/103970.html

標籤：Html/Css

上一篇：前端之css（二）

下一篇：如何在HTML中設定字體顏色，你知道這幾種方式嗎？