CSS深入理解之relative 笔记

relative对absolute的限制作用

  1. 限制 left/top/right/bottom 定位;
  2. 限制 z-index 层级,以relativez-index为准(不包括auto);
  3. 限制 absolute 不受overflow的影响的特性;

relative只能限制fixed定位的元素的z-index层级,其它都无法限制。

relative 定位特性

  1. 相对自身进行定位;
  2. 用来定位时,无侵入,不影响其它元素的布局;

relative定位同时设置了topbottom时,top起作用;同时设置了leftright时,left起作用,和顺序无关。

relative 和 z-index 的层级关系

默认情况下,网页中重叠的元素,后面的会覆盖前面的,即使使用z-index

给前面的元素添加属性position:relative之后,即使后面的元素使用z-index也无效。效果如下:

relative最小化影响原则

  1. 尽量避免使用relative,直接使用absolute配合margin进行精确控制。例如:

  2. relative最小化,针对定位元素提供单独的div设置relative。例如:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动...
    张歆琳阅读 96,734评论 39 192
  • absolute和float的相同特性表现 破坏性: 包裹性: absolute和float不能同时存在,对flo...
    soojade阅读 1,401评论 0 1
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 5,800评论 0 15
  • 弈翎说,“最烈酒的才可以隐藏最深的痛,其实可以换一种方式去不再记忆,比如把威士忌换成鸡尾酒。当华灯初上的时候,留一...
    郭弈翎阅读 4,416评论 3 15