聊聊本身的特性:
left、right、top、bottom 定位都是相对于自身位置定位
当 left、right 同时存在 left 生效
当 top、bottom 同时存在 top 生效
无侵入,保留原始位置,不会影响其他元素的布局
可运用于 《自定义拖拽》
了解 relative 与 absoulte 的关系:
relative 元素 会限制内部 absoulte 元素的 left、right、top、bottom 定位
relative 元素 会限制内部 absoulte 元素的 z-index 层级
relative 元素 会限制内部 absoulte 元素可受 overflow 元素设置
了解 relative 与 fixed 的关系 :
relative 元素会限制内部 fixed 元素的 z-index 层级
了解 relative 与 z-index 的关系 :
设置 relative 的元素,会提高层叠上下文
当 z-index 为 auto 的 relative元素 ,则不会限制内部 absoulte 元素的层级
当 z-index 为数值时, 则会创建层叠上下文,从而比较的是两个 relative元素的层叠数值大小, 而不是内部元素的比较。
使用注意:
尽量避免使用 relative 属性
如使用,则尽量缩小控制区域,减少到只包含要限制的内部元素
以上是关于CSS中relative 特性 的详细内容。更多信息请关注PHP中文网其他相关文章!