position两三事 - 网页制作

　position两三事

作者：aslen　时间： 2009-02-16　文档类型：原创　来自：蓝色理想

第 1 页 position两三事 [1]
第 2 页 position两三事 [2]
第 3 页 position两三事 [3]
第 4 页 position两三事 [4]

position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为默认的方式。所以实际上可用的值只有3个为了方便阅读~
以下统称为：固定(fixed)、相对(relative)、绝对(absolute).

第1：固定定位(fixed)

固定定位可以让某一元素固定在屏幕的某个位置.其效果和背景的background-attachment:fixed属性相似！但是IE6以及更早的版本不支持.所以以下例子请在非IE6以下浏览器下浏览

例子：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="aslen" /> <meta name="Copyright" content="www.gongchang.com" /> <style> *{margin:0;padding:0} </style> </head> <body> <div style="position:fixed;height:50px;width:50px;background:#f00;left:50px;top:50px;"></div> 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 换行 </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

第2：相对定位(relative)

相对定位是依据设置定位属性的4个方向上的任意值来实现相对与其本来在文档中正常显示的位置的偏移；

当相对定位的元素偏移出其本来的文档流的位置：其他元素仍然认为那个位置为其的逻辑文档流区域.而不会去补上去，虽然我们感官上认为那里是没有东西的~

例子：

其中第2个色块就是相对于其本来的文档流中的位置依据left:10px;top:20px;的定位属性值进行偏移.

其后面的第3个色块依然认为前面的空白（就是第3的原本的文档流的位置）为第3个色块的文档流区域则不会自动填充上去.

当相对定位的父元素出现滚动条时，IE浏览器的特殊情况
例子：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="aslen" /> <meta name="Copyright" content="www.gongchang.com" /> <style type="text/css"> *{padding:0;margin:0} </style> </head> <body> <div style="width:500px;height:150px;overflow:auto;"> 我是正常文档流的文字 <div style="width:300px;background:#ff0000;height:20px;position:relative;">我是相对定位，拉动滚动条看我在那里</div> 我是正常文档流的文字 我是正常文档流的文字 我是正常文档流的文字 我是正常文档流的文字 我是正常文档流的文字 我是正常文档流的文字 我是正常文档流的文字 我是正常文档流的文字 我是正常文档流的文字 我是正常文档流的文字 我是正常文档流的文字 我是正常文档流的文字 我是正常文档流的文字 我是正常文档流的文字 </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

当相对定位的父元素有滚动条的时候，该相对定位元素再IE的表现很诡异（其后面的元素依然认为那个位置为该元素的默认位置，而表现出相对定位的特性，但是拉动滚动条时，在FF下正常即相对定位的元素和文档一起滚动，但是在IE系列里面，相对定位的色块依然在原地不动，此时元素的特性有点像绝对定位）

当相对定位同时拥有定位属性的4个方向的值和margin属性。相对定位的定位属性 top right bottom left和margin-top margin-right margin-bottom margin-left;各个方向上一至的时候其值会产生叠加效果，而按照方向执行叠加后的数值的偏移

例子：

出处：蓝色理想
责任编辑：bluehearts

上一页下一页 position两三事 [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

border-radius与圆角


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule