position: absolute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position: absolute</title> </head> <body> <div id="wrap"> <div class="box1"></div> <div class="box4"> <div class="box2"></div> </div> <div class="box3"></div> <span class="s1">我是一个span</span> </div> </body> </html> <style type="text/css"> /** {*/ /* margin: 0;*/ /* padding: 0;*/ /*}*/ .box1{ 200px; height: 200px; background: red; } .box2{ 200px; height: 200px; background: yellow; /* 1。开启绝对定位会使元素脱离文档流（浮起来，高一层级） 2. 开启绝对定位后，如果不设置偏移量，则元素的位置不会发生变化 3. 绝对定位是相对于离开他最近的，开启了定位的祖先元素定位的 （一般情况，开启子元素的绝对定位都会同时开启父元素的相对定位）；如果所有的祖先元素都没有开启定位，就会相对于浏览器窗口进行定位 4. 绝对定位会使元素提升一个层级 5. 绝对定位改变元素性质，内联元素变为块元素 */ position: absolute; left: 0px; top: auto; } .box3{ 300px; height: 300px; background: yellowgreen; } .box4{ 300px; height: 300px; background: orange; /*position: relative;*/ } .s1{ 200px; height: 200px; background: yellow; /*5. 绝对定位改变元素性质，内联元素变为块元素(宽高‘起作用’)*/ position: absolute; } </style>