position.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .bigbox{
 8                 width: 500px;
 9                 height: 1500px;
10                 margin: 100px;
11                 background-color: #eee;
12                 position: relative;
13             }
14             .box{
15                 width: 200px;
16                 height: 200px;
17                 display: inline-block;
18                 background-color: #FF7F50;
19                 /*相对定位*/
20                 position: relative;
21                 left: 100px;
22                 top: 100px;
23             }
24             .llbox{
25                 width: 200px;
26                 height: 200px;
27                 background-color: rgba(0,0,0,.5);
28                 /*绝对定位*/
29                 position:absolute;
30                 left: 100px;
31                 top: 100px;
32             }
33             .bbbox{
34                 width: 200px;
35                 height: 200px;
36                 background-color: rgba(255,0,0,.5);
37                 /*绝对定位*/
38                 position:absolute;
39                 left: 150px;
40                 top: 100px;
41             }
42             .big{
43                 background-color: #00FFFF;
44                 position: relative;
45                 width: 300px;
46                 height: 300px;
47                 margin: 100px;
48             }
49             .guding{
50                 width: 100px;
51                 height: 200px;
52                 background-color: pink;
53                 position: fixed;
54                 right: 100px;
55                 top: 100px;
56             }
57         </style>
58     </head>
59     <body>
60         <div class="bigbox">
61             <div class="big">
62                 <div class="llbox"></div>
63                 <div class="bbbox"></div>
64                 <div class="guding"></div>
65                 
66             </div>
67             11111111111111111111111111111111111111111111111111111111111111
68             11111111111111111111111111111111111111111111111111111111111111
69             11111111111111111111111111111111111111111111111111111111111111
70             <span>1111111111</span>
71             <div class="box"></div><span>1111111111</span>
72             
73             11111111111111111111111111111111111111111111111111111111111111
74             11111111111111111111111111111111111111111111111111111111111111
75             11111111111111111111111111111111111111111111111111111111111111
76             11111111111111111111111111111111111111111111111111111111111111
77         </div>
78         <!--<input type="" name="" id="" value="" />-->
79         
80     </body>
81 </html>
猜你喜欢
