position两三事 - 网页制作

　position两三事

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

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

3.在IE下没有设置定位属性4个方向的值的绝对定位的块元素的表现是inline-block 再FF下其是block

例子：

运行代码框
<!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;background:#ff0000;position:absolute;height:30px;">我是一个具有绝对定位属性的块元素~你在IE下看我再那里，你再FF下看我再那里</div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

这个其实是浏览器的差异，在FF下在块元素拥有position:absolute属性后，其依然作为一个块元素，而相对于前面的文档流而换行，所以为了统一，在这种使用情况下，可以加上display:inline即可保证各个浏览器统一

4.绝对定位元素依据其定位基点进行绝对定位时会忽视其定位基点的padding空间

例子：

运行代码框
<!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="padding:100px;width:500px; position:relative; background:#f00;height:500px;margin:0 auto"> <div style="width:400px;background:#CC9900;height:30px;top:0;position:absolute">我是一个具有position属性；且定位属性为top:0px;你看我再那里</div> 我是正常文档流中的文字 </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

图中的红色区域是一个高度和宽度为500px且padding:100px;因为绝对定位元素忽视其定位基点的padding属性，所以在顶部呈现

5.设置任何一个方向的定位属性.该绝对元素除该方向按照定位属性的值依据其具有position属性最近的父元素为基点进行定位.其另外方向上的逻辑位置依然受前一文档流中的元素影响.按照正常的位置进行布局：

例子：

运行代码框
<!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;background:#CC9900;height:30px">1</div> <div style="width:500px;background:#ff0000;position:absolute;height:30px;left:40px;">我是一个具有绝对定位，且只有left:40px这个定位属性；你看再我那里</div> <div style="width:500px;background:#CC9900;height:30px">3</div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

我们可以看到图中的红色区域，除按照left:40这个属性偏移40像素后，其垂直方向的位置依然为正常文档流中的位置

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

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

◎进入论坛网页制作、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