首頁  >  文章  >  web前端  >  關於CSS中relative 特性

關於CSS中relative 特性

一个新手
一个新手原創
2017-10-20 09:31:061953瀏覽

聊聊本身的特性

  1. # left、right、top、bottom 定位都是相對於自身位置定位

  2. 當left、right 同時存在left 生效

  3. ##當top、bottom 同時存在top 生效

  4. 無侵入,保留原始位置,不會影響其他元素的佈局

  5. 可運用於《自訂拖曳》

#了解relative 與absoulte 的關係

  1. relative 元素會限制內部absoulte 元素的left、right、top、bottom 定位

  2. relative 元素會限制內部absoulte 元素的z-index 層級

  3. #relative 元素會限制內部absoulte 元素可受overflow 元素設定

#了解relative 與fixed 的關係 :

  1. relative 元素會限制內部fixed 元素的z-index 層級

了解relative 與z-index 的關係 :

  1.  設置relative 的元素,會提高層疊上下文

  2.  當z-index 為auto 的relative元素,則不會限制內部absoulte 元素的層級

  3.  當z-index 為數值時, 則會建立層疊上下文,從而比較的是兩個relative元素的層疊數值大小, 而不是內部元素的比較。

使用注意力

  1.  盡量避免使用relative 屬性

  2. 如使用,則盡量縮小控制區域,減少到只包含要限制的內部元素

以上是關於CSS中relative 特性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn