內(nèi)容概述

一. CSS屬性 - position

• CSS屬性 - position
  • static：靜態(tài)定位
  • relative：相對定位
    • 圖片居中
  • absolute：絕對定位
    • 圖片案例
    • 二維碼案例
  • fixed：固定定位

標準流 normal flow

• 默認情況下，元素都是按照normal flow（標準流、常規(guī)流、正常流、文檔流document flow）進行排布
  • 從左到右、從上到下按順序擺放好
  • 默認情況下，互相之間不存在層疊現(xiàn)象
• margin、padding定位
  • 在標準流中，可以使用margin、padding對元素進行定位
    • 其中margin還可以設(shè)置負數(shù)
  • 比較明顯的缺點是
    • 設(shè)置一個元素的margin或者padding，通常會影響到標準流中其他元素的定位效果
    • 不便于實現(xiàn)元素層疊的效果

position: static 靜態(tài)定位（position屬性的默認值）

• 按照normal flow布局
• left 、right、top、bottom沒有任何作用

position: relative 相對定位

• 元素按照normal flow布局
• 可以通過left、right、top、bottom進行定位
  • 定位參照對象是元素自己原來的位置
• 相對定位的應(yīng)用場景
  • 在不影響其他元素位置的前提下，對當前元素位置進行微調(diào)
• 圖片居中

position: absolute 絕對定位（脫標）

• 元素脫離normal flow（脫離標準流、脫標）

  可以通過left、right、top、bottom進行定位
  定位參照對象是最鄰近的定位祖先元素
  如果找不到這樣的祖先元素，參照對象是視口

  定位元素（positioned element）
  position值不為static的元素
  也就是position值為relative、absolute、fixed的元素

絕對定位技巧【疑難】

• 絕對定位元素（absolutely positioned element）
  • position值為absolute或者fixed的元素
• 對于絕對定位元素來說
  • 定位參照對象的寬度 = left + right + margin-left + margin-right + 絕對定位元素的實際占用寬度
  • 定位參照對象的高度 = top + bottom + margin-top + margin-bottom + 絕對定位元素的實際占用高度
• 如果希望絕對定位元素的寬高和定位參照對象一樣，可以給絕對定位元素設(shè)置以下屬性
  • left: 0、right: 0、top: 0、bottom: 0、margin:0
• 如果希望絕對定位元素在定位參照對象中居中顯示，可以給絕對定位元素設(shè)置以下屬性
  • left: 0、right: 0、top: 0、bottom: 0、margin: auto
  • 另外，還得設(shè)置具體的寬高值（寬高小于定位參照對象的寬高）

• 絕對定位就像貼紙，需要就往上貼：
  • 圖片案例
  • 二維碼案例

position: fixed 固定定位（脫標）

• 元素脫離normal flow（脫離標準流、脫標）
• 可以通過left、right、top、bottom進行定位
  • 定位參照對象是視口（viewport）
  • 視口（Viewport）
    • 文檔的可視區(qū)域
    • 如右圖紅框所示
• 當畫布滾動時，固定不動
• 側(cè)邊欄

脫離標準流（脫標）

• 可以隨意設(shè)置寬高（都變成塊級元素）
• 寬高默認由內(nèi)容決定（包裹內(nèi)容）
• 不再受標準流的約束
• 不再給父元素匯報寬高數(shù)據(jù)

二. CSS屬性 - z-index

• 不設(shè)置的話，初始值為auto

• z-index屬性用來設(shè)置定位元素的層疊順序（僅對定位元素有效）

  • 取值可以是正整數(shù)、負整數(shù)、0

• 比較原則

  • 如果是兄弟關(guān)系
    • z-index越大，層疊在越上面
    • z-index相等，寫在后面的那個元素層疊在上面
  • 如果不是兄弟關(guān)系
    • 各自從元素自己以及祖先元素中，找出最鄰近的2個定位元素進行比較
    • 而且這2個定位元素必須有設(shè)置z-index的具體數(shù)值

作業(yè)

1.四個案例

• 圖片居中
• 側(cè)邊欄
• 商品大圖, 有6個a的案例
• 二維碼案例

2.考拉導(dǎo)航的個人中心的下拉

3.預(yù)習浮動

絕對路徑

相對路徑:

脫離標準流的元素: position: fixed/absolute, float

和display有什么關(guān)系?

display: block/inline/inline-block

img/iframe

提問

box-sizing的兩個值:

• content-box
  • width: 只是設(shè)置content的大小
• border-box
  • width: 設(shè)置border+padding+content

background的相關(guān)屬性:

• background-color
• image
• size
• position
• attachment
• repeat
• background