绝对定位不占任何位置的定位(带有绝对定位的div盒子直接不保留之前的位置移动)
相对定位占位置的定位(举例:虽然带有相对定位的div模块移动了,但是这个div之前的占的位置还在的)
绝对定位的div盒子的父亲必须要有一个定位,不然绝对定位就直接以浏览器为基准开始走动
举个例子
没给最外面的DIV定位,给最里面DIV一个绝对定位,发现这个小DIV是沿着浏览器边缘走动的
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .diva { width: 500px; height:500px; background-color:red; margin-left:40px; } .divb { width: 300px; height:300px; background-color:#ccc; position: absolute; left: 20px; } </style></head><body><div class="diva"> <div class="divb"></div></div></body></html>如果我跟父亲给个相对定位了,效果看下图
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .diva { width: 500px; height:500px; background-color:red; margin-left:40px; position: relative; } .divb { width: 300px; height:300px; background-color:#ccc; position: absolute; left: 20px; } </style></head><body><div class="diva"> <div class="divb"></div></div></body></html>position: absolute;绝对定位position: relative;相对定位