css之relative

2018-06-24 00:56:11来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、relative对absolute的限制作用

  1、限制left/top/right/bottom定位。absolute默认是在也没的左上角,当父类设定为relative,absolute就被限制在父类的区域内,设定top/left/right/bottom时,起始点为父类的左上角

  2、限制z-index层级。页面中的俩个absolute的z-index不同且不为auto,有各自的层级,当这两个absolute的父类都有relative的时候,它们的层级就依赖于父类的relative的z-index

  3、限制在overflow下的效果。默认情况下,overflow:hidden是无法限制absolute的,当加上relative时,才能被限制住;当overflow:auto或overflow:scoll时,里面有滚动条,absolute是不会随滚动条移动的,这时就需要加上relative

二、relative只能限制fixed的z-index层级

三、relative和定位

    1、relative的定位和偏移都是相对于自身所在的位置

    2、relative的定位不会影响其他元素的定位。作用:可以用来自定义拖拽功能

四、relative最小化影响原则

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

    1、尽量避免使用relative

    2、必须使用的时候,relative也要最小化

 

参考地址:http://www.imooc.com/learn/565

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css之absolute

下一篇:css3 UI 修饰——回顾