当前位置:软件学堂 > 资讯首页 > 网络编程 > DIV+CSS > css position元素的定位属性

css position元素的定位属性

2012/11/27 10:24:12作者:佚名来源:网络

移动端

【实例介绍】

css position元素的定位属性

在CSS布局中,position属性非常重要,很多特殊容器的定位必须用position来完成。通过使用position属性,我们可以选择4种不同类型的定位。

【基本语法】

position:static  |   absolute  |   fixed  |   relative
top:auto  |   长度值   |   百分比
right:auto  |   长度值  |   百分比
bottom:auto  |   长度值  |   百分比
left:auto  |   长度值  |   百分比

【语法介绍】

从上面的语法可以看出,定位的方法有很多种,它们分别是静态定位(static)、绝对定位(absolute)、固定定位(fixed)和相对定位(relative),其具体功能如表所示。

position的属性及其功能说明

position的属性              功能说明
aboslute                         生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过left、top、right以及bottom属性进行规定
fixed                                 生成固定定位的元素,相对于浏览器窗口进行定位。 元素的位置通过left、top、right以及bottom属性进行规定
relative                            生成相对定位的元素,相对于其正常位置进行定位
static                                默认值。没有定位,元素出现在正常的流中

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>position定位</title> </head> <style> .box{ width:250px; height:250px;

position:absolute; top:150px; left:50px;

background:#F93; font-family: "宋体"; color:# 03} </style> <body> <div class="box">这里的box在设置了position:absolute后, 是以body的左上角为原始点定位的。</div> </body> </html>

【代码分析】

代码加粗的部分使用position设置为绝对定位,并且设置距离左侧1 50像素,距离顶部50像素。这里的box在设置了position:absolute后,是以body的左上角为原始点定位的,如图所示。

元素的定位属性position运行效果

 【素材及源码下载】

请点击:元素的定位属性css position 下载本实例相关素材及源码

 

标签: css position  元素  定位