1.div的分层
<div class="demo"></div>
.demo{
width:100px;
height:100px;
border:10px solid rgba(255,0,0,0.5);
background-color: green;
}
<div class="demo">
<div class="childDiv">
</div>
</div>
.demo{
width:100px;
height:100px;
border:10px solid rgba(255,0,0,1);
background-color: green;
}
.childDiv{
background-color: white;
height:50px;
}
<div class="demo">
<div class="float"></div>
<div class="childDiv">
</div>
</div>
.demo{
width:100px;
height:100px;
border:10px solid rgba(255,0,0,1);
background-color: green;
}
.childDiv{
height:50px;
background-color: white;
}
.float{
float:left;
height:20px;
width:20px;
background-color: black;
}
<div class="demo">
<div class="float"></div>
<span class="text">内联子元素</span>
<div class="childDiv">
</div>
</div>
.demo{
width:200px;
height:200px;
border:10px solid rgba(255,0,0,1);
background-color: green;
}
.childDiv{
height:50px;
background-color: white;
}
.float{
float:left;
height:50px;
width:50px;
background-color: black;
}
.text{
color:red;
margin-left:-30px;
}
2.position
- static 默认值，待在文档流
- relative 相对定位，升起来，但不脱离文档流
- absolute 绝对定位，定位基准是祖先元素中最近的非static
- fixed 固定定位，定位基准是viewport
- sticky 粘滞定位
position:relative
<div class="container">
<div class="demo"></div>
<div class="demo2"></div>
</div>
.demo{
border:1px solid green;
background-color: green;
width:50px;
height:50px;
position:relative;
top:10px;
left:10px;
}
.demo2{
width:50px;
height:50px;
background-color: black;
}
z-index
- z-index：auto为默认值，不创建新层叠上下文
- z-index：0/1/2
- z-index：-1/-2
.demo{
position:relative;
}
.demo2{
position:relative;
z-index:-1;
}
position:absolute
<div class="container">
<span class="close">X</span>
</div>
.container{
border:1px solid red;
height:400px;
position:relative;
}
.close{
position:absolute;
top:0;
right:0;
padding:2px 8px;
background-color: grey;
color:white
}
<button>
点击
<span class="tips">提示内容</span>
</button>
button{
position:relative;
}
button > .tips{
position:absolute;
border:1px solid green;
white-space:nowrap;
bottom:calc(100% + 10px);
left:50%;
transform: translateX(-50%);
}
button > .tips{
display:none;
}
button:hover > .tips{
display:inline-block;
}
position:fixed
<div class="container">
<div class="fixed"></div>
</div>
.container{
border:1px solid red;
height:400px;
}
.fixed{
position:fixed;
width:50px;
height:50px;
background-color: red;
bottom:200px;
left:10px;
}
position:sticky
.sticky{
position:-webkit-sticky;
position:sticky;
top:0;
border:1px solid green;
background-color: red;
}
1.gif
3.层叠上下文
创建层叠上下文
- 文档根元素（<html>）
-
position值为 absolute或 relative且 z-index值不为 auto 的元素；
-
opacity 属性值小于 1 的元素
-
transform属性值不为 none 的元素
- flex容器的子元素，且
z-index]值不为 auto；
<div class=container>
<div class="a">
<div class="a2">10</div>
</div>
<div class="b">
<div class="b2">5</div>
</div>
</div>
.container{
border: 1px solid black;
height: 200px;
background: white;
position: relative;
}
.a{
border: 1px solid red;
}
.a2{
position: relative;
z-index: 10;
height: 50px;
width: 50px;
background: red;
color:white;
}
.b{
border: 1px solid green;
}
.b2{
position: relative;
z-index: 5;
height: 50px;
width: 50px;
top:-20px;
background: blue;
color:white;
font-size:30px;
}
负z-index
负z-index无法脱离层叠上下文
<div class="demo">
<div class="div"></div>
</div>
.demo{
background: rgb(0,255,255);
width: 200px;
height: 200px;
padding: 10px;
position: relative;
z-index:0;
}
.demo > .div{
height: 50px;
background: red;
position: relative;
z-index: -1;
}
网友评论