采用相对定位的元素,会相对于它原来的位置进行定位 并且,元素原始占用的空间不会被其他元素占用 采用绝对定位的元素,会寻找离它最近的采用了定位的父元素,并以他为坐标进行定位 如果所有的父元素都没有使用定位,则以body为坐标进行定位 并且,元素占用的空间会被其他元素占用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #left,#center,#right{ float: left; } #left{ width: 200px; height: 200px; background-color: yellow; } #center{ width: 200px; height: 200px; background-color: #bce8f1; position: absolute; top: 40px; left: 40px; } #right{ width: 200px; height: 200px; background-color: #ffbc82; } </style> <title>CSS定位</title> </head> <body> <div style="position: relative;top: 40px;left: 40px"> <div> <div> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </div> </div> </body> </html>