面试题 -- 四种定位的区别

position的四种属性: static,relative,absolute,fixed

  • static

    静态定位: 元素框正常生成的,top left bottom right这几个偏移属性不会影响其静态定位的正常显示


  • relative
    相对定位: 相对定位的偏移参考元素是元素本身,不会使元素脱离文档流。元素的初始位置占据的空间会被保留。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级

  • absolute
    绝对定位绝: 对定位元素以父辈元素中最近的定位元素为参考坐标,如果绝对定位元素的父辈元素中没有采用定位的,那么此绝对定位元素的参考对象是html,元素会脱离文档流。就好像文档流中被删除了一样。并且定位元素经常与z-index属性进行层次分级

  • fixed
    固定定位: 位移的参考坐标是可视窗口,使用fixed的元素脱离文档流。并且定位元素经常与z-index属性进行层次分级

你可能感兴趣的:(面试题 -- 四种定位的区别)