html css学习笔记-定位

来源：互联网发布：基因工程中数据分析编辑：程序博客网时间：2024/06/01 09:03
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        /*#position1{*/            /*background-color: palegoldenrod;*/            /*width: 100px;*/            /*height: 100px;*/            /*position: relative;*/            /*left: 30px;*/            /*top:50px;*/        /*}*/        /*绝对布局，不占用位置*/        /*#position1{*/            /*background-color: palegoldenrod;*/            /*width: 100px;*/            /*height: 100px;*/            /*position: absolute;*/            /*left: 30px;*/            /*top:50px;*/        /*}*/     /*fixed:位置固定了，不会跟着滚动条滚动*/        /*#position1{*/            /*background-color: palegoldenrod;*/            /*width: 100px;*/            /*height: 100px;*/            /*position: fixed;*/            /*left: 30px;*/            /*top:50px;*/        /*}*/        /*静态时，设置偏移量(top,left。。)时不管用*/        #position1{            background-color: palegoldenrod;            width: 100px;            height: 100px;            position: relative;            left: 30px;            top:50px;            z-index:3;        }        /*与前面一个div重合在一起了*/        #position2{            background-color: red;            width: 100px;            height: 100px;            position: relative;            left: 20px;            top:20px;            z-index: 2;        }     </style></head><body><!--  css定位：改变元素在页面上的位置  css定位机制：    普通流：元素按照其在html中的位置顺序决定排布的过程（根据摆放顺序）    浮动：    绝对布局：  定位属性：    positon:把元素放在一个静态的，相对的，绝对的或固定的位置中    top:    left:    right:    bottom    overflow:设置元素溢出其区域发生的事情 （是否出现滚动动）    clip:设置元素显示形状 （主要用于图片）    vertical-align:垂直对齐方式    z-index:堆叠顺序（优先级）   positon:     static:     relative:     absoulte:--><div id="position1"></div><div id="position2"></div><script>    for(var i=0;i<100;i++){        document.write(i+"<br/>")    }</script></body></html>
0 0