position两三事 - 网页制作

　position两三事

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

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

6.当元素设置为绝对定位后改元素内的浮动会自动清除

例子：

运行代码框
<!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} li{float:left;width:500px;height:40px;background:fuchsia; list-style:none} </style> </head> <body> <ul style="border:1px blue solid;width:500px;padding:50px;background:green;position:absolute"> <li>我是浮动的元素</li> <li>我是浮动的元素</li> <li>我是浮动的元素</li> <li>我是浮动的元素</li> <li>我是浮动的元素</li> <li>我是浮动的元素</li> <li>我是浮动的元素</li> <li>我是浮动的元素</li> <li>我是浮动的元素</li> <li>我是浮动的元素</li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

例子：

我们会发现这个红色的色块距离左边200PX.left+margin-left

小结：

当元素同时拥有浮动和绝对定位时.绝对定位的优先权大于浮动.因为浮动受文档的逻辑结构位置限制。而绝对定位不会。

所以当绝对定位脱离文档流，绝对定位的元素不受浮动影响.即float:left会失效，

数学上我们知道.X轴上一个数值 Y轴上的一个数值即可确定一个点，感官上left right属于x轴bottom top属于Y轴。

我们完全可以设置一个无宽度和高度绝对定位的元素同时拥有top right bottom left来实现其根据其参考的定位基点的父元素的的大小来自适应大小.

但是IE6不支持.IE6只能识别left的值而忽视right.所以下面例子请在非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=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="height:500px;background:#f00;position: relative;width:500px; margin:100px auto"> <div style="position:absolute;left:100px;top:100px;bottom:100px;right:100px;background:#0066FF">我是绝对定位我自适应我的定位基点的元素</div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

实际应用:（个人的习惯）

标题（“标题文字”和“更多”）（相对+绝对）
需要让一些具有vertical-align:middle属性的元素抽出文档流（这个看具体情况，因为vertical-align:middle会影响文档中的文字对齐）（绝对）
固定元素的浮动块（该浮动块内的元素布局固定可以用绝对定位，并设置该浮动块为相对）(相对+绝对)

经典论坛讨论：
http://bbs.blueidea.com/thread-2910721-1-1.html

本文链接：http://www.blueidea.com/tech/web/2009/6405.asp　

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

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

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