1. 程式人生 > >CSS深入理解學習筆記之relative

CSS深入理解學習筆記之relative

需要 定位 層疊 left 避免 str 作用 屬性 存在

1、relative和absolute的相煎關系

  限制作用:①限制left/top/right/bottom定位;②限制z-index層級;③限制在overflow下的囂張氣焰。

  relative和fixed限制作用:限制z-index層級。

2、relative和定位

  特性:①相對自行進行定位;②無侵入,不影響其他元素布局。

  top/bottom和left/right對立屬性同時存在時的表現:top>bottom left>right

3、relative和層級

  提高元素的層疊上下文。

  新建層疊上下文與層級控制:relative元素的z-index是auto的時候,不會限制子元素的層疊。(IE8+)

4、relative的最小化影響原則

  定義:盡量降低relative屬性對其他元素或者布局的潛在影響。

  原則:①盡量避免使用relative;②relative最小化,將需要absolute定位的元素放到一個空的relative元素中。

CSS深入理解學習筆記之relative