设置z-index 的时候会和父级的层级对比。
如果父级的层级不相同，则各自子集的层级不能对比。
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>定位和居中</title>
<meta name="description" content="描述">
<meta name="keywords" content="关键字">
<style>
/*
定位 position 有三个值
relative 相对定位 相对没有定位之前的额位置进行位移
absolute 绝对定位
filxe 固定窗口定位
有
*/
/* 方法一 */
.box1{
position:absolute;
top:50%;
left:50%;
height:200px;
width:200px;
background-color:yellowgreen;
margin-top:-100px;
margin-left:-100px;
}
/* 方法二 四个方位角都进行拉扯 (这个不常用，做法不规范，不推荐)*/
.box2{
position:absolute;
top:0;
left:0;
bottom:0;
right: 0;
margin:auto;
background-color:pink;
height:100px;
width: 100px;
}
/* 只有定位的才有层级
z-index:0;默认是0
一般想要提升层级 只需要加层级
数值越大 层级越高
层级只能同级的元素比
*/
.bo3{
position:relative;
height:400px;
width: 400px;
background-color:#fff;
}
div{
box-shadow: 6px 8px 4px gray;
}
.box-z-10{
position:absolute;
height:300px;
width: 390px;
background:greenyellow;
z-index:10;
}
.bo3 .box-z-10 span{
position:absolute;
right: 0;
height:200px;
width:110px;
background-color:yellow;
z-index:50;
}
.bo3 .box-z-10 p{
position:absolute;
height:100px;
width:300px;
background-color:pink;
z-index:2;
}
.box-z-20{
position:absolute;
height:330px;
width: 280px;
background:steelblue;
z-index:20;
}
.bo3 .box-z-20 span{
position:absolute;
height:200px;
width:210px;
background-color:yellow;
z-index:2;
}
.bo3 .box-z-20 p{
position:absolute;
height:100px;
width:230px;
background-color:pink;
z-index:0;
}
</style>
</head>
<body>
<h2>绝对居中定位</h2>
<div class="box1">绝对居中定位 方法一</div>
<div class="box2">绝对居中定位 方法二</div>
<h2>层级 z-index 层级只能同级的元素比</h2>
<div class="bo3">
<div class="box-z-10">
<span id="tom">我是tom,我爸爸10层的,虽然我有50层，但是我还是显示在下面</span>
<p>我是p,我爸爸10层的</p>
</div>
<div class="box-z-20">
<span>我是apan,我爸爸20层的,我只有2层，但是我比tom显示的要高。虽然他层级为50，但是他的爸爸只有10层</span>
<p>我是p,我爸爸20层的</p>
</div>
</div>
</body>
</html>
1679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
