CSS教程:position属性

2009-04-02 19:36:08 佚名

position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为默认的方式。
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;各个方向上一至的时候其值会产生叠加效果，而按照方向执行叠加后的数值的偏移
例子：
运行代码框

<!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:50px;background:#f00;position: absolute;left:100px;margin-left:100px;">

我一个具有position:absolute;且left:100px;margin-left:100px

</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
我们会发现这个红色的色块距离左边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会影响文档中的文字对齐）（绝对）固定元素的浮动块（该浮动块内的元素布局固定可以用绝对定位，并设置该浮动块为相对）(相对绝对)