CSS之定位和堆疊屬性

YUZHONG發表於2019-05-12

CSS之定位:

定位有:

  1. 絕對定位
  2. 相對定位
  3. 固定定位

絕對定位:

屬性:position屬性值:absolute

相對定位:

屬性:position屬性值:relative

相對元素是相對於在頁面中原來的位置,如果給了元素一個相對定位那麼元素在頁面中原來的位置會佔位。

絕對定位:

屬性:position屬性值:fixed

固定定位是元素相對於瀏覽器視窗的定位

一般情況下,相對定位和絕對定位在頁面中是成對使用的,給子元素一個x絕對定位給父元素一個相對定位。

特徵:

  1. 如果給行內元素一個絕對定位那麼這個行內元素可以設定寬高,如果給塊元素一個絕對定位並且這個塊元素還沒有設定寬高,那麼他的寬高是由內容撐起的
  2. 如果子元素有絕對定位那麼不受父元素padding的影響。
  3. 如果子元素有浮動,父元素有絕對定位那麼不用清楚浮動。

堆疊屬性:

屬性:z-index屬性值:1~x(屬性值是數值)

在頁面中如果一個元素的堆疊屬性的屬性值大,那麼這個屬性值大的會堆疊在屬性值小的上邊,屬性值沒有單位。堆疊屬性只能用在含有定位屬性的元素上。

相關文章