重要知识点:

1 relative对absolute

  1、限制left/top/right/bottom定位

  2、限制z-index层级  (absolute的z-index越大就越高,但有relative在外面有具体得z-index数值除auto,就会超越absolute的层级)

  3、限制在overflow下 (老二超过老大地盘会被裁剪)

2 而relative对fixed的限制:

  限制z-index层级;

3 定位

  (1)absolute相对边界,relative相对自身定位,如果是top:0,left:0.则其位置不变。

  (2)无侵入作用

    即他不会影响其他元素的布局,比如说:如果是margin-top:-100px;移走后,紧接着这个div的div也会向上移动;如果是top:-100px,则不会,后面的元素会保持不动

  (3)同时设置对立属性--top、bottom或者left、right  

    1、absolute表现为拉伸   

    2、relative表现为只有top和left生效

4 层级

  1. 提高层叠上下文

    页面有两张图片出现层叠情况,默认后一张图片层叠前一张,如果设置前一张图片position:relative,则前一张会层叠在前

  2. 新建层叠上下文与层级控制

    父级设置了relative,限制子级的层级

    如果父元素的z-index:auto,就不会限制子级的层级,但是不包括IE6/IE7(因为IE6/IE7在z-index:auto情况下仍然会创建层叠上下文,不符合规范)

5 最小化原则

  尽量降低relative属性对其他元素或布局的潜在影响

  relative最小化 只需给需要绝对定位的元素添加有一个空div,这个div relative,这样的好处是,可以避免对其他的元素造成层叠影响

 

 

 

 

  

posted on 2017-03-08 14:25  国足不快乐  阅读(179)  评论(0编辑  收藏  举报