CSS教程:position屬性

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

網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：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)的方式。
position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動(dòng)條他依然可以在瀏覽器的左上角.posotion屬性有4個(gè)取值.由于static為默認(rèn)的方式。所以實(shí)際上可用的值只有3個(gè) 為了方便閱讀~
以下統(tǒng)稱為：固定(fixed)、相對(duì)(relative)、絕對(duì)(absolute).
第1：固定定位(fixed)
固定定位可以讓某一元素固定在屏幕的某個(gè)位置.其效果和背景的background-attachment:fixed屬性相似！但是IE6以及更早的版本不支持.所以以下例子請(qǐng)?jiān)诜荌E6以下瀏覽器下瀏覽
例子：
運(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=gb2312" />

<meta name="author" content="aslen" />

<meta name="Copyright" content="www.gongchang.com" />

<style>

*{margin:0;padding:0}

</style>

</head>

<body>

<div style="position:fixed;height:50px;width:50px;background:#f00;left:50px;top:50px;"></div>

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

<br />換行

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
第2：相對(duì)定位(relative)
相對(duì)定位是依據(jù)設(shè)置定位屬性的4個(gè)方向上的任意值來實(shí)現(xiàn)相對(duì)與其本來在文檔中正常顯示的位置的偏移；
當(dāng)相對(duì)定位的元素偏移出其本來的文檔流的位置：其他元素仍然認(rèn)為那個(gè)位置為其的邏輯文檔流區(qū)域.而不會(huì)去補(bǔ)上去，雖然我們感官上認(rè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;height:30px;position:relative;left:10px;top:20px;">2</div>

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

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
其中第2個(gè)色塊就是相對(duì)于其本來的文檔流中的位置依據(jù)left:10px;top:20px;的定位屬性值進(jìn)行偏移.
其后面的第3個(gè)色塊依然認(rèn)為前面的空白（就是第3的原本的文檔流的位置）為第3個(gè)色塊的文檔流區(qū)域則不會(huì)自動(dòng)填充上去.
當(dāng)相對(duì)定位的父元素出現(xiàn)滾動(dòng)條時(shí)，IE瀏覽器的特殊情況
例子：
運(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;height:150px;overflow:auto;">

我是正常文檔流的文字

<div style="width:300px;background:#ff0000;height:20px;position:relative;">我是相對(duì)定位，拉動(dòng)滾動(dòng)條 看我在那里</div>

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

我是正常文檔流的文字<br />

</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
當(dāng)相對(duì)定位的父元素有滾動(dòng)條的時(shí)候，該相對(duì)定位元素再IE的表現(xiàn)很詭異（其后面的元素依然認(rèn)為那個(gè)位置為該元素的默認(rèn)位置，而表現(xiàn)出相對(duì)定位的特性，但是拉動(dòng)滾動(dòng)條時(shí)，在FF下正常即相對(duì)定位的元素和文檔一起滾動(dòng)，但是在IE系列里面，相對(duì)定位的色塊依然在原地不動(dòng)，此時(shí)元素的特性有點(diǎn)像絕對(duì)定位）
當(dāng)相對(duì)定位同時(shí)擁有定位屬性的4個(gè)方向的值和margin屬性。相對(duì)定位的定位屬性 top right bottom left和margin-top margin-right margin-bottom margin-left;各個(gè)方向上一至的時(shí)候其值會(huì)產(chǎn)生疊加效果，而按照方向執(zhí)行疊加后的數(shù)值的偏移
例子：
運(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="height:50px;background:#f00;position: relative;left:100px;margin-left:-100px;">

</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

上一頁(yè)12 3 4 下一頁(yè) 閱讀全文

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

CSS教程:position屬性

相關(guān)文章

最新評(píng)論

文章分類

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

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