heml5第七课时，绝对定位（absolute）

来源：互联网发布：办公室软件培训心得编辑：程序博客网时间：2024/06/17 06:16
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>绝对定位（absolute）</title>    <style>        #child1,#child2,#child3{            float: left;        }        #child1{            width: 200px;            height: 200px;            background-color: #4d2e83;        }        #child2{            width: 200px;            background-color: #585858;            height: 200px;            position: absolute;/*写了absolute(绝对定位)，top和left才可以用*/            top: 100px;            left: 30px;        }        #child3{            width: 200px;            height: 200px;            background-color: #ff6600;        }        #parent3{            background-color: #19242C;            width: 1000px;            height: 500px;            position: relative;            top: 100px;            left: 100px;        }        #parent2{            width: 88%;            height: 88%;            background-color: #42668f;        }        #parent1{            width: 88%;            height: 88%;            background-color: yellow;        }    </style></head><!--采用绝对定位的元素，会寻找离他最近的采用了定位的父元素，并以它为坐标进行定位    如果所有的父元素都没有使用定位，则以body为坐标进行定位，    并且元素占用的空间会被其他元素占用，即原本child2的位置，会被饿child3占用。--><body><div id="parent3">    <div id="parent2">        <div id="parent1">            <div id="child1"></div>            <div id="child2"></div>            <div id="child3"></div>        </div>    </div></div></body></html>
0 0