定位问题position

1.relative相对对位：占有原来的位置。以浏览器为准定位进行移动top/left/right/bottom

2.absolute绝对定位：不占有原来的位置（脱标）

如果没有祖先元素或者祖先元素没有定位，以浏览器为准定位；

如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位祖先元素为参考点移动位置；

加了绝对定位的盒子不能通过margin：0 auto垂直水平居中，但可以通过算法居中

left：50%；
top：50%
margin-top:-100px; （让盒子移动自身宽度的一半）
margin-left: -100px；（让盒子移动自身宽度的一半）

3.fixed固定定位：不占有原先的位置（脱标）。以浏览器的可视窗口进行定位，跟父元素没有任何关系，不随滚动条滚动

固定在版心banner的右边：

 /* 1. 走浏览器宽度的一半 */

 left: 50%;

 /* 2. 利用margin 走版心盒子宽度的一半距离 */

margin-left: 405px;

4.stickk粘性定位（了解）：占有原先的位置。以浏览器的可视窗口为参照点移动元素，必须添加top、left、bottom、right其中一个才生效。兼容性差

5.z-index定位叠放次序:只有定位的盒子才有z-index属性。数值越高（不能加单位），盒子越靠上

行位元素【span、a、em】添加绝对/固定定位，可以设置宽高

块级元素，添加绝对/固定定位，如果不给宽高，默认是内容大小

总结