菜鸡源码,专注精品下载!
当前位置:首页 > 建站教程 > 建站知识

CSS定位教程:详解position语法

发布时间:2024-01-05  栏目:建站知识   浏览:   分类:css教程 CSS定位 CSS语法

CSS定位教程中,position属性用于设置元素的定位类型。它有四个值:static、relative、absolute和fixed。static是默认值,元素按照正常的文档流进行排列。relative相对于元素自身的位置进行偏移。absolute相对于最近的非static定位祖先元素进行偏移。fixed相对于浏览器窗口进行定位,即使页面滚动,元素也不会移动。此外,top、right、bottom和left属性用于设置元素在垂直和水平方向上的偏移量。z-index属性用于设置元素的堆叠顺序,数值越大,元素越靠上。通过熟练掌握这些属性,可以实现各种复杂的页面布局效果。

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参数值,其他都兼容。

实战案列

CSS定位教程 position语法详解

效果演示

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>position</title><style>#position{position:absolute;top:20px;left:20px;width:150px;height:40px;padding:010px;background:#eee;}</style></head><body><divid="position">相对于页面的绝对定位方法</div></body></html>


相关专题

相关文章

    无相关信息
评论
建站知识
建站知识
使用技巧
调试安装
运营推广