heml5第七课时，相对定位

来源：互联网发布：匈牙利算法指派问题编辑：程序博客网时间：2024/06/03 16:52

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>相对定位relative</title>    <style>        #parent{            width: 700px;            height: 200px;            background-color: rosybrown;        }        #child1,#child2,#child3{            float: left;        }        #child1{            width: 200px;            height: 200px;            background-color: #4d2e83;        }        #child2{            width: 200px;            background-color: #585858;            height: 200px;            position: relative;            /*写了relative(相对定位)，top和left和right和bottom才可以用*/            top: 100px;            left: 30px;            z-index: -1;/*调整div的先后级，谁在上，谁在下！绝对定位用的比较多。*/        }        #child3{            width: 200px;            height: 200px;            background-color: #ff6600;        }    </style></head><!--采用相对定位的元素，会相对于它原来的位置进行定位，    并且元素原始占用的空间不会被其他元素占用，即原本child2的位置，不会被child3占用--><body><div id="parent">    <div id="child1"></div>    <div id="child2"></div>    <div id="child3"></div></div></body></html>

0 0