CSS元素的定位属性position
原创
©著作权归作者所有:来自51CTO博客作者ccna_zhang的原创作品,请联系作者获取转载授权,否则将追究法律责任
元素的定位属性(position)用来定义元素的定位方式,在定位属性中,可以使用4种属性值,分别为static,absolute,fixed和relative,其
语法结构如下所示:
position: static | absolute | fixed | relative
其中每个属性值的含义,如下所述:
static: 默认值,元素按照自身默认的方式显示。
absolute: 绝对定位,以有含有定位属性的父元素为基准,按照边偏移属性中定义的属性值显示。
fixed: 浏览器不支持该属性
relative: 相对定义,元素以自身位置为基准,按照边偏移属性中定义的属性值显示。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
div {
position: absolute;
left: 100px;
top: 100px;
border: 2px solid #333333;
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div>
这是使用定位属性position的实例,在使用定位属性的时候,还要使用其他的辅助属性,才能正常显示。
</div>
</body>
</html>
以上的代码中,定义了元素的定位属性值为绝对定位,使用边偏移属性确定元素左侧和顶部偏移值均为100px。