定位的区别

定位(position)

一.固定定位属性值:fixed

  1. 相对于浏览器窗口定位
  2. 随着内容一起滚动

二.相对定位属性值:relative

  1. 相对于它本身正常位置发生位置改变
  2. 关键词: left / top / right / bottom 来改变位置
  3. 特性:  1) 相对定位元素不脱离文档流  2) 相对定位元素不影响元素本身特性  3) 如果没有关键词来改变位置,元素本身不会发生任何变化  4) 位置改变,原来的位置一直占据着

三.绝对定位属性值:absolute

  1. 相对于已经定位的上级元素来发生位置改变  1) 定位上级包括:fixed relative absolute  2) 没有上级定位元素参考,相对于body
  2. 关键词: left / top / right / bottom
  3. 特性:  1) 完全脱离文档流  2) 行内元素支持宽高  3) margin:auto;无效

四.层级属性:z-index

五.绝定位元素居中方法

  • 关键词都为0,margin:auto;

    div{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    }
  • 百分数居中减去定位元素宽高一半

    div{
    position:absolute;
    width:100px;
    height:100px;
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-50px;
    }
posted @ 2018-10-25 22:01  五十九  阅读(155)  评论(0编辑  收藏  举报