CSS定位教程 position语法详解
CSS中的定位,用position语法方法,定位又分为绝对定位、相对定位和固定定位。
position语法为CSS2版本,无继承性,默认值为:static。
position语法
语法:position:static | relative | absolute | fixed
代码案列
position:static;
取值说明
static:默认无定位。无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。
relative:相对于自身坐标定位。对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。
absolute:相对于上级元素坐标定位。对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed:固定坐标到页面。对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。IE6及以下不支持此参数值
兼容性
除IE6及更早浏览器不支持position属性的fixed参数值,其他都兼容。
实战案列
效果演示
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>position</title> <style> #position { position: absolute; top: 20px; left: 20px; width: 150px; height: 40px; padding: 0 10px; background: #eee; } </style> </head> <body> <div id="position">相对于页面的绝对定位方法</div> </body> </html>
本文结束