定位
相对定位:relative;
绝对定位:absolute;
固定定位:fixed。
相对定位
position: relative;
相对于自己原来的位置进行定位,进行位置的调整。
margin与相对定位调整位置:
1.盒子与盒子的距离、间隙。 相对位置的调整。
2.margin会影响后面的元素。 相对定位不会影响其他元素。
相对定位不会投标,坑位还在,其他元素挤不走;
相对定位做绝对定位的参考,子绝父相(子绝对定位,父相对定位)。
绝对定位
position: absolute;
找一个参考系,定义横纵坐标,默认在父容器或浏览器的左上角,横坐标用left、right;纵坐标用top、bottom。
绝对定位会投标。
参考点:一个绝对定位的元素,如果父元素中出现了已定位的元素,那将以该元素为参考点。不一定是相对定位,任何元素都可以作为参考点。
应用:
压盖效果:一个div压到另一个div上方
绝对定位的盒子居中
固定定位
position: fixed;
相对于浏览器进行定位,无论窗口怎么滚动盒子显示位置不变。
用途:
1.网页返回顶部,侧边广告。
2.顶部固定导航栏。
z-index
z-index属性是定位元素专用,属性值是数字,数字大的压盖住小的。
z-index:10;
z-index:1;
1.写在后面的定位元素会盖住前面的
2.数值大的盖住小的,z-index是一个自然数默认是0
3.从父现象,都有z-index的值时会比较父容器的z-index 的值,如果父1大于父2,就算儿子1比儿子2小,儿子1也在儿子2上方。