【CSS3】定位 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <div id="div1"></div>
10     <div id="div2"></div>
11     <div id="div3"></div>
12     <div id="div4"></div>
13     <div id="div5"></div>
14     <div id="div6"></div>
15     <div id="div7"></div>
16     <div id="div8"><img src="img/草1.jpg"></div>
17     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
18     <div id="div9">
19         文字
20         <input type="text" name="">
21         <img src="img/鸟1.jpg">
22         <p id="p1">哈哈</p>
23         <div id="div10"></div>
24     </div>
25     <br><br><br><br><br><br><br>
26     <div id="div11"></div>
27     <div id="div12"></div>
28     <div id="div13"></div>
29     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
30     <p>让窗口滚动起来</p>
31 </body>
32 </body>
33 </html>
  1 #div1{
  2     width: 100px;
  3     height: 100px;
  4     background: red;
  5     /*position: relative;*//*相对定位对象会占据原来位置*/
  6     position: absolute;/*绝对定位对象可以层叠。absolute相对与父元素body来定位*/
  7     left: 100px;
  8     }
  9 #div2{
 10     width: 100px;
 11     height: 100px;
 12     background: green;
 13     /*position: relative;*//*相对定位和绝对定位都需要结合left、right、top、bottom使用*/
 14     position: absolute;
 15     right: 50px;
 16     }
 17 #div3{
 18     width: 100px;
 19     height: 100px;
 20     background: blue;
 21     /*position: relative;*/
 22     position: absolute;
 23     top: 50px;
 24     }
 25 #div4{
 26     width: 100px;
 27     height: 100px;
 28     background: pink;
 29     /*position: relative;*/
 30     /*position: absolute;*/
 31     /*position: fixed;*//*滚动窗口时fixed定位的内容不会被滚动，相对于窗口来定位。*/
 32     /*position: static;*//*默认值，没有定位*/
 33     /*bottom: 10px;*/
 34     }
 35 #div5{
 36     width: 200px;
 37     height:200px;
 38     background: rgba(255,0,0,0.5);
 39     position: relative;
 40     left: 200px;
 41     z-index: 3;
 42 }
 43 #div6{
 44     width: 200px;
 45     height:200px;
 46     background: rgba(0,255,0,0.5);
 47     position: relative;
 48     left: 300px;
 49     top: -100px;
 50     z-index: 2;
 51 }
 52 #div7{
 53     width: 200px;
 54     height:200px;
 55     background: rgba(0,0,255,0.5);
 56     position: relative;
 57     left: 400px;
 58     top: -200px;
 59     z-index: 1;/*1在最底层*/
 60 }
 61 #div8>img{
 62     /*position: fixed;*/
 63     clip: rect(10px,160px,160px,10px);/*只有在position为absolute或fixed时才会起作用，在position为relative或static时无效。*/
 64 }
 65 #div9{
 66     width: 100%;
 67     height: 500px;
 68     background: rgba(100,100,100,0.3);
 69 }
 70 #p1{
 71     display: inline-block;
 72     vertical-align: 20px;
 73 }
 74 #div10{
 75     width: 100px;
 76     height: 100px;
 77     background: pink;
 78     display: inline-block;
 79     vertical-align: text-top;/*可设text-bottom、sub、super*/
 80 }
 81 input{
 82     vertical-align: top;/*可设baseline默认、top、middle、bottom、像素、百分比*/
 83 }
 84 #div11{
 85     width: 200px;
 86     height: 200px;
 87     background: red;
 88     float: left;
 89 }
 90 #div12{
 91     width: 200px;
 92     height: 200px;
 93     background: green;
 94     float: left;
 95 }
 96 #div13{
 97     width: 200px;
 98     height: 200px;
 99     background: blue;
100     clear: left;/*清除浮动clear:both、left、right、none*/
101 }

 

posted @ 2017-04-23 19:35  xiongjiawei  阅读(258)  评论(0)    收藏  举报