CSS样式表中的position属性取值和作用

来源：互联网发布：焊接机器人编程及应用编辑：程序博客网时间：2024/05/22 17:06

一、首先，我们大致看一下CSS样式中position属性的常用取值都有哪些：

从Dreamwaver给出的提示中我们可以大致了解到取值方式差不多有6种：

1. absolute绝对定位方式

2. fixed相对浏览器显示区定位方式

3. inherit继承父容器的定位方式

4. relative相对父级容器定位方式

5. static默认的定位方式，另称“无定位”

6. !important层叠样式表级联(可用来提升Class优先级)

我们主要关注于其中的3个：absolute、fixed、relative

二、我们看一下具体说明：

absolute：绝对定位。可通过“top”、“left”、“right”、“bottom”属性设置其在页面中的位置，类似坐标定位。且应用了“absolute”的元素会漂浮到其他未应用“absolute”、“float”等属性的元素之上，并且可以相互交叠；
fixed：相对浏览器的显示区域定位。功能有点类似漂浮广告，例如设置“left”属性值为“20px”则，滚动条向右滚动时，元素和浏览器显示区域的左边距一直固定为20像素，会跟随着滚动条自动向右移动；
relative：相对于父容器定位(相对定位)。可通过“top”、“left”、“right”、“bottom”属性设置其在容器中的相对位置，相对于父容器的左边，相对于父容器右边…
static：无定位。默认的布局方式，如果元素的position属性设置为“static”，则元素将不接受任何“top”、“left”、“right”、“bottom”属性的值。

三、按照排序我们看一下应用实例：

absolute

CSS代码：

#contianer{  /* 父容器*/background:#0F0;position:absolute;top:30px;left:50px;}#sidebar{position: absolute;background: #F00;height: 80px;width: 200px;left: 9px;/* 设置sidebar层对于body元素的做边距，可以认为是 X坐标 */top: 60px;/* 设置sidebar层对于body元素的上边距，可看作 Y 坐标，负 Y 坐标*/}

HTML代码：

<BODY><div id="contianer">    外部容器<div id="sidebar">    内部容器绝对布局    </div>    </div></BODY>

deamweaver中的效果，可直接调整位置和大小

从图中我们可以看出，内部红色的层并没有根据它的父容器（绿色的层）而改变位置。得出结论，应用了absolute 绝对布局的元素除 body 元素外不再有父容器，完全漂浮于空中。在Dreamweaver里面这个层已经能够用鼠标拖着到处摆放了，可以摆放到任何地方，并且可以像PowerPoint内的形状那样改变大小

relative

CSS代码:

#contianer{background:#0F0;position:relative;top:30px;   /* 父容器 Container 相对于 body元素的顶端间距设置为30个像素 */left:50px;  /* 父容器 Container 相对于body元素的左边间距设置为50个像素 */}#sidebar{position: relative;background: #F00;height: 80px;width: 200px;left: 50px; /* 子元素 sidebar 相对于父容器 Container 左边的间距设置为 50个像素 */top: 30px; /* 子元素 sidebar 相对于父容器 Container 顶端的间距设置为 30个像素 */}

HTML 代码：

<BODY><div id="contianer"><div id="sidebar">    相对浏览器显示区布局    </div>    </div></BODY>

由图可见，内部的Div层会相对于它的父容器来布局，和绝对布局最大的区别是，绝对布局除了 Body 元素外，没有父容器。

fixed

CSS代码：

#sidebar{position: fixed;background: #F00;height: 80px;width: 200px;right: 50px;    /* 相对于浏览器显示区又边缘的固定距离 */top: 30px;     /* 相对于浏览器显示区上边缘的固定距离 */}

HTML代码：

<BODY>    <div id="sidebar">    相对浏览器显示区布局    </div>    <img src="cream.jpg" alt="wallpaper"></BODY>

滚动条向下滚动之后

当滚动条向下滚动的时候，DIV元素会跟着滚动条滚动，样式中设置的相对与浏览器显示区的距离不会改变，很类似滚动广告。

以上就是常用的 postion 属性取值的效果。中间如有误解，还请指出，第一次写博文，考虑不周之处望大家见谅


	
					
					   CSS样式表中的position属性取值和作用
	  	   css position属性取值
	  	   css 中Position属性及值的作用和用法
	  	   css的position属性取值
	  	   css样式表和选择器的优先级以及position元素属性值的区别
	  	   css中的position属性absolute和relative
	  	   CSS中的position和z-index属性
	  	   css中的position属性
	  	   CSS中的Position属性
	  	   CSS中的Position属性
	  	   CSS中的position属性
	  	   css中的position属性
	  	   css中的position属性
	  	   Css 中的position属性
	  	   分析css中的position属性和z-index属性
	  	   谈谈CSS中的position属性
	  	   CSS中的position属性特点
	  	   CSS中的position的属性
	     		  
	  	   unity3d 重要函数方法
	  	   java 异形窗体 学习01
	  	   core animation to video
	  	   简单分页的实现
	  	   28个Unix/Linux的命令行神器
	  	   CSS样式表中的position属性取值和作用
	  	   java中的线程池
	  	   Best Practices for Speeding Up Your Web Site
	  	   apue.h头文件（UNIX环境高级编程）
	  	   你应该知道的一些Linux技巧
	  	   最详细安卓ADT插件安装教程
	  	   编译IOS下的FFMpeg
	  	   Windows API —CreateFile
	  	   Record Your Core Animation Animation(video)