第六周相对布局与绝对布局

来源：互联网发布：mysql多表外连接查询编辑：程序博客网时间：2024/06/06 08:33

1.相对布局

position: relative;

相对定位是行对于原来的位子，当div用相对定位移走后，原来的位置还会保留，不会被其他div占据

    <style>        #left,#center,#right{            float: left;        }        #left{            width: 200px;            height: 200px;            background-color: yellow;        }        #center{            width: 200px;            height: 200px;            background-color: darkturquoise;            position: relative;            top: 20px;            left: 20px;        }        #right{            width: 200px;            height: 200px;            background-color: greenyellow;        }    </style>    <title>相对定位</title>    <!-- 相对定位是相对于原来的位置，    原来的位置还会保留--></head><body><div>    <div id="left"></div>    <div id="center"></div>    <div id="right"></div></div></body>

2.绝对定位

采用绝对定位的元素，寻找离他最近的使用了定位的父元素，并以它的坐标进行定位，

如果所有的父元素都没有使用定位，则以body为坐标进行定位，并且，元素原来占用

的空间会被其他元素占用，

小技巧在使用绝对定位时，一般在在外面的盒子div中设置一个相对定位，以这

个为参考坐标点，相对定位会保留这个位置，对全局没什么影响

    <style>        #left,#center,#right{            float: left;        }        #left{            width: 200px;            height: 200px;            background-color: yellow;        }        #center{            width: 200px;            height: 200px;            background-color: darkturquoise;            position: absolute;            top: 20px;            left: 20px;        }        #right{            width: 200px;            height: 200px;            background-color: greenyellow;        }    </style>    <title>绝对定位</title>    <!--采用绝对定位的元素，会寻找离他最近的使用了定位    的父元素，并以它的坐标进行定位，    如果所有的父元素都没有使用定位，则以body为坐标进行    定位，并且，元素原来占用的空间会被其他元素占用  --></head><body><div style="position: relative ;top: 100px;left: 100px">    <div>        <div>            <div id="left"></div>            <div id="center"></div>            <div id="right"></div>        </div>    </div></div></body>

0 0

第六周 相对布局与绝对布局

第六周相对布局与绝对布局