CSS之 relative 特性

本文转载于:猿2048网站CSS之 relative 特性

聊聊自己的特性：

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. 如使用，则尽可能缩小控制区域，减小到只包含要限制的内部元素