CSS基础-19CSS定位-定位

来源：互联网发布：mac os yosemite 下载编辑：程序博客网时间：2024/05/29 19:55
<!DOCTYPE html><!--CSS定位-定位--><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link href="css01.css" type="text/css" rel="stylesheet"></head><body>  <div id="postion1">我爱美女</div>  <div id="postion2">我爱美女</div><script>    for(var i =0;i<100;i++){        document.writeln(i+"<br>");    }</script></body></html>
css:
#postion1 {    width: 100px;    height: 100px;    background-color: crimson;    /*相对布局从上到下排列，默认（相当于Android中的线性布局）*/    position: relative;    /*向左偏移*/    left: 20px;    top: 20px;   /*两个重叠，值大的在上面*/    z-index: 2;}#postion2 {    width: 100px;    height: 100px;    background-color: chartreuse;    /*相对布局从上到下排列，默认（相当于Android中的线性布局）*/    position: relative;    /*向左偏移*/    left: 10px;    top: 10px;    /*两个重叠，值大的在上面*/    z-index: 1;}/*#postion1{*//*width: 100px;*//*height: 100px;*//*background-color: crimson;*//*绝对布局,会层叠到下面看不见*//*position: absolute;*//*}*//*#postion1{*//*width: 100px;*//*height: 100px;*//*background-color: crimson;*//*固定布局，滚动的时候不随页面的滚动而滚动*//*position: fixed;*//*}*//*#postion1{*//*width: 100px;*//*height: 100px;*//*background-color: crimson;*//*静态布局，偏移量不起任何效果*//*position: static;*//*left: 20px;*//*top: 20px;*//*}*/
0 0