第三十九节 层级定位

Posted kogmaw

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第三十九节 层级定位相关的知识，希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7 
 8         .con{
 9             width: 400px;
10             height: 400px;
11             border: 1px solid #000;
12             
13         }
14 
15         .box1,.box2,.box3,.box4{
16             width: 100px;
17             height: 100px;
18             position: absolute;
19 
20         }
21 
22         .box1{
23             background-color: green;
24             left: 20px;
25             top: 20px;
26             z-index: 1  /* 设定层级，将原来最底层变到了最上层*/
27         }
28         .box2{
29             background-color: pink;
30             left: 40px;
31             top: 40px;
32         }
33         .box3{
34             background-color: black;
35             left: 60px;
36             top: 60px;
37         }
38         .box4{
39             background-color: gold;
40             left: 80px;
41             top: 80px;
42 
43         }
44     </style>
45 </head>
46 <body>
47     <div class="con">
48         <div class="box1"></div>
49         <div class="box2"></div>
50         <div class="box3"></div>
51         <div class="box4"></div>
52     </div>
53 </body>
54 </html>

 

以上是关于第三十九节 层级定位的主要内容，如果未能解决你的问题，请参考以下文章

第三十九节，python内置全局变量

第一百三十九节，JavaScript，封装库--CSS选择器

第三百七十九节，Django+Xadmin打造上线标准的在线教育平台—xadmin的安装

第三百八十九节，Django+Xadmin打造上线标准的在线教育平台—列表筛选结合分页

-考研第三十九周总结-

-考研第三十九周总结-