• 【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 }
  • 相关阅读:
    根据外键名找到主表和关联表的相关列
    MS SQL 查询未提交的事务和执行的SQL语句
    Ionic 的常见问题
    从零开始在linux上搭建web服务器
    bat 批量提取指定目录下的文件
    tornado 协程 和 多线程
    HTML认识二
    HTML标签认识一
    HTML认识一
    使用Mysql执行SQL语句基础操作
  • 原文地址:https://www.cnblogs.com/xiongjiawei/p/6753598.html
Copyright © 2020-2023  润新知