CSS教程:position屬性

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

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

position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動(dòng)條他依然可以在瀏覽器的左上角.posotion屬性有4個(gè)取值.由于static為默認(rèn)的方式。
第3：絕對定位(absolute)
當(dāng)元素設(shè)置絕對定位后.則會(huì)從正常的文檔流中脫離.其后面的元素會(huì)完全忽視這個(gè)絕對定位的元素.就好像正常文檔流中不存在這個(gè)元素一樣.然后根據(jù)離其最近的一個(gè)具有position屬性的父對象的邊緣為定位基點(diǎn)（如果沒有沒有這樣一個(gè)父對象那么默認(rèn)依據(jù)窗口元素定位），根據(jù)設(shè)置定位屬性的4個(gè)方向的值來實(shí)現(xiàn)絕對的定位布局.
例子：
運(yùn)行代碼框

<!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;margin-top:1px;height:30px;position:absolute;left:10px;top:20px;">2</div>

<div style="width:500px;background:#CC9900;height:30px">3</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
我們可以看到.當(dāng)色塊2設(shè)置絕對定位之后.后面的第3色塊忽視其存在，自動(dòng)填補(bǔ)到正常的文檔流中（這個(gè)是根據(jù)窗口元素定位）
我們再來看一下IE中依據(jù)窗口元素定位的一個(gè)特殊情況
例子：
運(yùn)行代碼框

<?xml version="1.0" encoding="utf-8"?>

<!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">

html{background: #0099FF;padding:100px;}

body{color:#FFFFFF;background:#FF00FF;padding:100px;width:400px;position:relative;}

.wapper{background:#FF6600;}

.abso {width:200px; height:200px; border:1px #000 solid; position:absolute;left:0px;top:0px;background:#00FF00}

</style>

</head>

<body>

<div class="wapper">

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

此DEMO測試IE6的Quirks mode模式以及position定位參考的窗口元素

<div class="abso">絕對定位</div>

</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
此DEMO與position:absolute的定位工作方式無關(guān)~只是作為IE中特殊的情況列出來
除了上面的基本的position:absolute特點(diǎn)，其還有下面幾點(diǎn)；
1.如果我們只設(shè)置了position:absolute而沒有設(shè)置定位屬性的4個(gè)方向值的話.那么該絕對定位的元素依然遵循其在文檔流中的正常位置，它仍然受前一元素的文檔流位置影響，按照正常文檔流進(jìn)行布局。只不過現(xiàn)在是從正常的文檔流中抽出.其后面的元素會(huì)忽視其存在.而自動(dòng)補(bǔ)上去.因?yàn)榻^對定位的元素是不占文檔流的布局空間的。
例子：
運(yùn)行代碼框

<!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:200px;background:#ff0000;position:absolute;height:30px">2</div>

<div style="width:500px;background:#CC9900;height:30px">3</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
例子中第2個(gè)紅色的色塊就是一個(gè)只具有position:absolute屬性的元素，它仍然在正常的布局位置呈現(xiàn)，只不過后面的元素會(huì)忽視其存在
2.絕對定位會(huì)自動(dòng)把一個(gè)元素轉(zhuǎn)化為塊元素
例子：
運(yùn)行代碼框

<!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>

<span style="width:500px;background:#CC9900;height:30px;position:absolute">我們知道行間元素設(shè)置寬、高是被忽略的，你看看這個(gè)頁面的顯示</span>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
按照標(biāo)準(zhǔn)的渲染方式.行間元素設(shè)置的寬度和高度是被忽略的，但是當(dāng)給元素絕對定位之后，該元素會(huì)具有塊元素的特性，而可以設(shè)置寬度和高度（雖然絕對定位的元素不占布局空間）

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS教程:position屬性

相關(guān)文章

最新評(píng)論

文章分類

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

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