position: fixed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position: fixed</title> <style type="text/css"> .box1{ 200px; height: 200px; background: red; } .box2{ 200px; height: 200px; background: yellow; /* 固定定位： fixed 1. 固定定位也是决定定位 2. 不同之处于 - 他永远都相对于窗口定位 - 不会随滚动条滚动。比如：广告，视屏，客服 */ position: fixed; left: 0px; top: 0px; } .box3{ 200px; height: 200px; background: yellowgreen; } .box4{ 200px; height: 200px; background: orange; position: relative; } /*.s1{*/ /* 200px;*/ /* height: 200px;*/ /* background: yellow;*/ /* !*5. 绝对定位改变元素性质，内联元素变为块元素(宽高‘起作用’)*!*/ /* position: absolute;*/ /*}*/ </style> </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>