<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>relative1</title> <style type="text/css"> .f-box{ position: relative; /*border: 1px solid red;*/ } .c1{ background-color: purple; height: 100px; width: 100px; } .c2{ background-color: yellow; height: 100px; width: 100px; position: absolute;/*1.relative非脱离文档流，以自己原来的位置为参照物 移动后原来的位置还保留，所以是非脱离文档流 2.absolute脱离文档流,给标签设置父标签后就会以父标签的 左上角定位*/ left: 100px; } .c3{ background-color: blue; height: 200px; width: 200px; } </style> </head> <body> <div class="c1">1</div> <div class="f-box"> <div class="c2">2</div> </div> <div class="c3">3</div> </body> </html>