定位
静态定位 position: static
相对定位 position: relative
绝对定位 position: absolute 脱标 参考点
子绝父相
让绝对定位的盒子水平居中和垂直居中
固定定位 position: fixed
参考点 浏览器左上角
固定定位的元素脱标不占有位置
兼容性 ie6低版本不支持固定定位
02绝对定位的应用.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .fa { width: 600px; height: 300px; margin: 60px auto; background-color: skyblue; position: relative; } /*让儿子盒子水平居中*/ .son { width: 200px; height: 100px; background-color: pink; /* margin: 0 auto; 对绝对定位的盒子无效*/ position: absolute; left: 50%; /*百分比参考父亲的宽度*/ margin-left: -100px; /*自己的宽一半*/ top: 50%; margin-top: -50px; /* left: 300px; top: 150px; */ } </style> </head> <body> <div class="fa"> <div class="son"></div> </div> </body> </html>
