good.ddd | 码农工具

​x
 
<!DOCTYPE html>
​
<html lang="zh-cmn-Hans">
​
​
<head>
​
​
<meta charset="utf-8" />
​
<title>z-index_CSS参考手册_web前端开发参考手册系列</title>
​
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
​
​
<style>
​
​
*{ margin:0; padding:0; }
​
.z1,
.z2,
.z3 {
        
    border:1px solid yellow;
    width: 200px;
    
    height: 100px;
    
    
    color: #fff;
    
    text-align: right;
​
}
​
​
.z1 {
    padding:5px 10px;
    
    
        
    background: #000;
​
}
​
​
.z2 {
    
    padding:5px 10px;
    
        
    position:absolute;
    color:black;
    background: #C00;
​
}
​
​
.z3 {
​
    
    
    padding:5px 10px;
    position:relative;
    
​
    
    background: #999;
​
}
​
​
.z30 {
​
    position:absolute;
    width:150px;
    height:30px;
    background:white;
    color:black;
​
    z-index:3;
}
​
.z31 {
    position:absolute;
    width:150px;
    height:30px;
    right:20px
    left:20px;
    direction:rtl;
    bottom:50px;
    border:1px solid yellow;
    background:white;
    z-index:2;
    color:black;
}
​
​
</style>
​
​
</head>
​
​
<body>
​
​
<div class="z1">z-index:1</div>
​
<div class="z2">z-index:2</div>
​
<div class="z3">z-index:3</div>
​
​
</body>
​
</html>
HTML