定位
静态定位 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>
实现)1)
)
