CSS教程:position屬性

互聯(lián)網(wǎng) 發(fā)布時間：2009-04-02 19:36:08 作者：佚名

網(wǎng)頁制作Webjx文章簡介：position屬性可以讓你讓你隨意控制一個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動條他依然可以在瀏覽器的左上角.posotion屬性有4個取值.由于static為

position屬性可以讓你讓你隨意控制一個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動條他依然可以在瀏覽器的左上角.posotion屬性有4個取值.由于static為默認的方式。
6.當(dāng)元素設(shè)置為絕對定位后改元素內(nèi)的浮動會自動清除
例子：
運行代碼框

<!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.當(dāng)絕對定位同時擁有定位屬性和margin屬性、絕對定位的的定位屬性 top right bottom left和margin-top margin-right margin-bottom margin-left;各個方向上一至的時候其值會產(chǎn)生疊加效果，而按照方向執(zhí)行疊加后的數(shù)值的偏移
例子：
運行代碼框

<!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 全部選擇提示：你可先修改部分代碼，再按運行]
我們會發(fā)現(xiàn)這個紅色的色塊距離左邊200PX.left margin-left
小結(jié)：
當(dāng)元素同時擁有浮動和絕對定位時.絕對定位的優(yōu)先權(quán)大于浮動.因為浮動受文檔的邏輯結(jié)構(gòu)位置限制。而絕對定位不會。
所以當(dāng)絕對定位脫離文檔流，絕對定位的元素不受浮動影響.即float:left會失效，
數(shù)學(xué)上我們知道.X軸上一個數(shù)值 Y軸上的一個數(shù)值即可確定一個點，感官上left right屬于x軸bottom top屬于Y軸。
我們完全可以設(shè)置一個無寬度和高度絕對定位的元素同時擁有top right bottom left來實現(xiàn)其根據(jù)其參考的定位基點的父元素的的大小來自適應(yīng)大小.
但是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">我是絕對定位 我自適應(yīng)我的定位基點的元素</div>

</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運行]
實際應(yīng)用:（個人的習(xí)慣）

標題（“標題文字”和“更多”）（相對絕對）需要讓一些具有vertical-align:middle屬性的元素抽出文檔流（這個看具體情況，因為vertical-align:middle會影響文檔中的文字對齊）（絕對）固定元素的浮動塊（該浮動塊內(nèi)的元素布局固定可以用絕對定位，并設(shè)置該浮動塊為相對）(相對絕對)

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS教程:position屬性

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容