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>