position两三事（4）

作者：aslen　来源：蓝色理想　发布时间：2009-02-16 15:23:00　

标签：position,浏览器,绝对定位,相对定位

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>

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>

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

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

第一页上一页 1 2 3

投稿

position两三事（4）

猜你喜欢