定位的区别

Posted 2021-01-15 chengdudaxue

定位(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;
  }