css的定位一共有三种:
相对定位 relative
绝对定位 absolute
固定定位 fixed
相对定位
position:relative;
相对与自己原来的位置定位,进行位置的调整。
特点不脱离标准文档流,还占着位置,别人挤不走
不会影响别的元素
做绝对定位的参考
与margin的区别
margin会影响后面的元素
div{
height: 200px;
width: 200px;
display: inline-block;
}
.div1{
background-color: aqua;
margin-left: 100px;
}
.div2{
background-color: black;
}
绝对定位
.div1{
background-color: aqua;
position: relative;
left: 100px;
}
把div1换成相对定位
绝对定位不会挤走别div2,会遮盖住div2
相对定位一般做绝对定位的参考,子绝父相
绝对定位
position:absolute;
一个绝对定位的元素,如果祖先元素中出现了已定位的元素,那么将以该元素为参考点。
1.以最近的已经定位的祖先元素,不一定是父容器,也可以是爷爷。
2.不一定是相对对位,任何定位信息,都可以做子容器的参考点。
3.使用最多的子绝父相。
4.以父容器的border内侧点为参考点,进行定位。
当父级标签没有定位元素的话,就会向上一级找,直到body
.div1{
height: 200px;
background-color: chartreuse;
margin-top: 200px;
}
.div2 {
height: 100px;
width: 100px;
background-color: aqua;
position: absolute;
top: 50px;
left: 100px;
<div class="div1">
<div class="div2"> </div>
</div>
父级都没有定位元素,就会以body为参考
当父级有定位元素时
.div1{
height: 200px;
background-color: chartreuse;
position: relative;
left: 50px;
top: 50px;
}
.div2 {
height: 100px;
width: 100px;
background-color: aqua;
position: absolute;
top: 50px;
left: 100px;
}
<div class="div1">
<div class="div2"></div>
</div>
div2以div1为参考点(div1为div2的父级)
div2会以div1的左上角为参照点
应用:
1.压盖效果,一个div压在另一个div上面。
2.绝对定位的盒子居中。 left:50%;margin-left: -自身宽度的一半;
固定定位
position: fixed;
相对浏览器进行定位,无论页面怎么滚动, 这个盒子显示的位置不变。
div {
height: 200px;
}
body {
background-color: cadetblue;
}
.div1 {
width: 100%;
height: 200px;
background-color: chartreuse;
position: fixed;
top: 50px;
}
<div class="div1"> </div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
用途:
1.网页返回顶部,侧边广告。
2.顶部固定导航条
z-index 属性
z-index 属性 是定位元素专用的。 属性值是数字,数值大的会压盖住数值小的
不设置时默认是0 ,顺序在后的覆盖顺序在前的
.div1 {
width: 200px;
height: 200px;
background-color: chartreuse;
position: absolute;
top: 50px;
}
.div2{
height: 200px;
width: 200px;
background-color: black;
position: absolute;
top: 10px;
}
<div class="div1"> </div>
<div class="div2"></div>
当div1设置 z-index属性大于div2的 z-index时
.div1 {
width: 200px;
height: 200px;
background-color: chartreuse;
position: absolute;
top: 50px;
z-index: 2;
}
.div2 {
height: 200px;
width: 200px;
background-color: black;
position: absolute;
top: 10px;
z-index: 1;
}
- z-index都没有值或值相同的时候,写在后面的盒子会盖住前面的盒子。
2.数值大的会盖住数值小的,z-index是一个自然数,默认为0.
3.从父现象:大家都有z-index的值的时候,会比较父容器的z-index,如果父1比父2大,就算儿子2比儿子1大,儿子1也能压住儿子2。