CSS(13)z-index 及透明度

z-index 及透明度

z-index

图层

默认是0,最高无限

 .box{
   position: relative;
 }
 ​
 div:nth-of-type(1){
   width: 200px;
   height: 200px;
   background: #c3d23b;
   border: 1px solid #c3d23b;
   border-radius: 30px;
   z-index: 999;
 }

透明度

opacity : 0.5 背景透明度(0~1)

html:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>index</title>
 ​
   <link rel="stylesheet" href="../z-index及透明度/style.css">
 ​
 </head>
 <body>
 ​
 <div class="box">
 <div></div>
 <div>琪琪又炸毛了</div>
 </div>
 ​
 </body>
 </html>
 ​

css:

 div:nth-of-type(1){
   width: 200px;
   height: 200px;
   background: #c3d23b;
   border: 1px solid #c3d23b;
   border-radius: 30px;
 }
 ​
 div:nth-of-type(2){
   width: 102px;
   height: 20px;
   color: #2f70ff;
   background: #d9deea;
   border: 1px solid #2f70ff;
   position: relative;
   top: -50px;
   right: -20px;
   opacity: 0.5;
 }

 

上一篇:移动端开发学习01: viewport视口的概念02——1px问题


下一篇:弹性布局flex学习