CSS定位总结

定位(position)

1. static:

在标准流中，就算设置left,right,top,bottom也没有效果

2. relative

相对自己原来的位置移动

left:20px  自己左边距离20px，元素占据空间不变，周围的static元素不受影响。

  应用：把图片一直居中展示：

      先把装图片的div（.box）设置为overflow：hidden

      然后：.box img{

                  positiion:relative;

                  left:-960px;(图片的一半宽度)  /*图片向左移动img的一半*/  (或者transform:translate(-50%))

                  margin-left:50%;   /*向右移动父元素（.box）的一半*/

                  }

3. fixed固定定位

元素脱离normal flow

可以通过left,right,top,bottom进行定位，定位参照对象是视口（viewPort）

当画布滚动是，固定不动

 

4. absolute绝对定位

元素脱离标准流

可以通过left,right,top,bottom进行定位，
定位参照对象是最邻近的定位祖先元素，如果找不到这样的祖先元素，参照对象是视口

       定位元素：position的值不为staticd的元素即position的值为relative,absolute,fixed的元素

 

4.1 子绝父相

如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：

• 父元素设置为position:relative（让父元素成为定位元素，而且父元素不脱离标准流）
• 子元素设置position:absolute
• 简称为子绝父相

如上图，父元素“手机考拉”不应该脱离标准流，子元素二维码有最好采用绝对定位，则父元素使用相对定位

绝对定位技巧

1. 绝对定位元素：positon值为absolute或者fixed的元素

2. 对于绝对定位元素来说：

定位参照对象的宽度=left+right+margin-left+margin-right+绝对定位元素实际占用宽度（上下方向类似）

所以，子绝父相的情况下：

1.让完全占据父元素： 子元素设置left:0，right:0(margin-left,margin-right默认为0)的情况下，子元素水平占据父元素

2.让内容居中：当子元素设置了宽高，要使子元素水平居中，可以设置left:0;right:0;margin:0 auto;

absolute的left,right默认为auto,无法确定是否可以左右平分，而手动将left,right设为0，margin-left,margin-right设置为auto,它可以水平居中

5. position总结

6. 元素的层叠

都是定位元素：后来的元素在原来的元素上面

6.1 z-index

 

 

 

ps:

可以脱离标准流的方式：fixed,absolute,float

脱离标准流元素的特点：

1. 可以随意设置宽高

2. 宽高默认由内容决定:

3. 不再受标准流的影响

4. 不向父元素汇报宽高

5. display属性为block，但由于没有父元素，width,height为auto时不知道父元素宽高，看起来很像“inline-block”