相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法

一.相对定位:position:relative;

不脱离文档流,固定在原位置,层级会升高会有覆盖效果

二.绝对定位:position:absolute;

脱离文档流,只是单纯飘起来,不再占据位置
在不设置移动方式时,不会直接移动.
可以实现多个盒子层叠.

1.找参照物

1.父元素有定位时,会以父元素为参照物,脱离文档流不再占有原来的位置.当不给子元素宽度时,会默认以父元素的左右边线为边界.
2.当父元素没有定位时,会逐级往上找到第一个拥有定位的元素作为参照物.
3.如果一直没有,则以body为参照物.

2.移动

当只给上下时,盒子不会左右移动.
同理当只给左右时,盒子上下不会移动.
1.top bottom控制距离参照物上下边界的距离
需要加单位,可以给负数.
2.left right控制距离参照物左右边界的距离
需要加单位,可以给负数.
3.通常情况下只需要给top和left两个数值即可

3.设置层级z-index

设置z-index
1.默认为0
2.当设置为负数时,会显示在文档流的下方,
3.当设置为正数时,会优先显示在上方,
4.数值越大显示的层级越靠上.

三.固定定位position:fixed;

相对于用户的浏览器窗口为参照物,即使用户滑动网页其位置也不会发生变化.常用于随行广告和弹窗.

四.居中

方法1.margin:auto

首先给上下左右均为0,再给margin:auto.
即可实现盒子在参照物居中.

方法2.50%配合margin法

首先 给left:50%;
top:50%;
再通过margin-top:-自身盒子一半的高度 ;
margin-left:-自身盒子一半的宽度;
即可实现居中

方法3.cala计算函数

直接给left:calc(50% - 盒子的宽度/2 );
top:calc(50% - 盒子的高度/2);
注意括号内的高度和宽度都需要加单位.
加减前后需要打空格.
乘除不用
注意:在相对定位外无盒子时,以上方法只能水平居中,
外有盒子时,以上方法可以在盒子内居中.

五.粘性定位position:sticky

当滚动条到达一定位置时,设置top为0.实现吸顶效果.