相对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } .box1{ 200px; height: 200px; background: red; } .box2{ 200px; height: 200px; background: yellowgreen; /* { margin: 0; padding: 0; } 定位：指的是将指定的元素摆放到页面的任意位置 1. 档开启了元素的相对定位，而不设置偏移量时，元素不会发生任何变化 开启定位： position的值非 static 时 2. 相对定位是相对于元素在文档流中原来的位置进行定位 3. 相对定位元素并没有脱离文档流 4. 相对定位元素会比文档流高一个层级 5. 相对定位不会改变元素的性质 */ position: relative; left:100px; top:200px; } .box3{ 200px; height: 200px; background: yellow; } /* 相对定位不会改变元素的性质: 内联 inline 元素，即使开启 position 也不能设置宽高 */ .s1{ 200px; height: 200px; background: yellow; } </style> </head> <body> <div id="wrap"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <span class="s1">我是一个span</span> </div> </body> </html>