CSS教程:position屬性

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

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

position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說(shuō)我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動(dòng)條他依然可以在瀏覽器的左上角.posotion屬性有4個(gè)取值.由于static為默認(rèn)的方式。
position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說(shuō)我們用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è)方向上的任意值來(lái)實(shí)現(xiàn)相對(duì)與其本來(lái)在文檔中正常顯示的位置的偏移；
當(dāng)相對(duì)定位的元素偏移出其本來(lái)的文檔流的位置：其他元素仍然認(rèn)為那個(gè)位置為其的邏輯文檔流區(qū)域.而不會(huì)去補(bǔ)上去，雖然我們感官上認(rèn)為那里是沒(méi)有東西的~
例子：
運(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ì)于其本來(lái)的文檔流中的位置依據(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)行]
#p#
position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說(shuō)我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動(dòng)條他依然可以在瀏覽器的左上角.posotion屬性有4個(gè)取值.由于static為默認(rèn)的方式。
第3：絕對(duì)定位(absolute)
當(dāng)元素設(shè)置絕對(duì)定位后.則會(huì)從正常的文檔流中脫離.其后面的元素會(huì)完全忽視這個(gè)絕對(duì)定位的元素.就好像正常文檔流中不存在這個(gè)元素一樣.然后根據(jù)離其最近的一個(gè)具有position屬性的父對(duì)象的邊緣為定位基點(diǎn)（如果沒(méi)有沒(méi)有這樣一個(gè)父對(duì)象那么默認(rèn)依據(jù)窗口元素定位），根據(jù)設(shè)置定位屬性的4個(gè)方向的值來(lái)實(shí)現(xiàn)絕對(duì)的定位布局.
例子：
運(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è)置絕對(duì)定位之后.后面的第3色塊忽視其存在，自動(dòng)填補(bǔ)到正常的文檔流中（這個(gè)是根據(jù)窗口元素定位）
我們?cè)賮?lái)看一下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測(cè)試IE6的Quirks mode模式以及position定位參考的窗口元素

<div class="abso">絕對(duì)定位</div>

</div>

</body>

</html>

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

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
按照標(biāo)準(zhǔn)的渲染方式.行間元素設(shè)置的寬度和高度是被忽略的，但是當(dāng)給元素絕對(duì)定位之后，該元素會(huì)具有塊元素的特性，而可以設(shè)置寬度和高度（雖然絕對(duì)定位的元素不占布局空間）
#p#
position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說(shuō)我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動(dòng)條他依然可以在瀏覽器的左上角.posotion屬性有4個(gè)取值.由于static為默認(rèn)的方式。
3.在IE下沒(méi)有設(shè)置定位屬性4個(gè)方向的值的絕對(duì)定位的塊元素的表現(xiàn)是inline-block 再FF下其是block
例子：
運(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:#ff0000;position:absolute;height:30px;">我是一個(gè)具有絕對(duì)定位屬性的塊元素~你在IE下看我再那里，你再FF下看我再那里</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
這個(gè)其實(shí)是瀏覽器的差異，在FF下在塊元素?fù)碛衟osition:absolute屬性后，其依然作為一個(gè)塊元素，而相對(duì)于前面的文檔流而換行，所以為了統(tǒng)一，在這種使用情況下，可以加上display:inline即可保證各個(gè)瀏覽器統(tǒng)一
4.絕對(duì)定位元素依據(jù)其定位基點(diǎn)進(jìn)行絕對(duì)定位時(shí)會(huì)忽視其定位基點(diǎn)的padding空間
例子：
運(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="padding:100px;width:500px; position:relative; background:#f00;height:500px;margin:0 auto">

<div style="width:400px;background:#CC9900;height:30px;top:0;position:absolute">我是一個(gè)具有position屬性；且定位屬性為top:0px;你看我再那里</div>

我是正常文檔流中的文字

</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
圖中的紅色區(qū)域是一個(gè)高度和寬度為500px且padding:100px;因?yàn)榻^對(duì)定位元素忽視其定位基點(diǎn)的padding屬性，所以在頂部呈現(xiàn)
5.設(shè)置任何一個(gè)方向的定位屬性.該絕對(duì)元素除該方向按照定位屬性的值依據(jù)其具有position屬性最近的父元素為基點(diǎn)進(jìn)行定位.其另外方向上的邏輯位置依然受前一文檔流中的元素影響.按照正常的位置進(jì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;position:absolute;height:30px;left:40px;">我是一個(gè)具有絕對(duì)定位，且只有l(wèi)eft:40px這個(gè)定位屬性；你看再我那里</div>

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

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
我們可以看到圖中的紅色區(qū)域，除按照l(shuí)eft:40這個(gè)屬性偏移40像素后，其垂直方向的位置依然為正常文檔流中的位置
#p#
position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說(shuō)我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動(dòng)條他依然可以在瀏覽器的左上角.posotion屬性有4個(gè)取值.由于static為默認(rèn)的方式。
6.當(dāng)元素設(shè)置為絕對(duì)定位后改元素內(nèi)的浮動(dòng)會(huì)自動(dòng)清除
例子：
運(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}

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>我是浮動(dòng)的元素</li>

<li>我是浮動(dòng)的元素</li>

<li>我是浮動(dòng)的元素</li>

<li>我是浮動(dòng)的元素</li>

<li>我是浮動(dòng)的元素</li>

<li>我是浮動(dòng)的元素</li>

<li>我是浮動(dòng)的元素</li>

<li>我是浮動(dòng)的元素</li>

<li>我是浮動(dòng)的元素</li>

<li>我是浮動(dòng)的元素</li>

</ul>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
7.當(dāng)絕對(duì)定位同時(shí)擁有定位屬性和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="width:500px;height:50px;background:#f00;position: absolute;left:100px;margin-left:100px;">

我一個(gè)具有position:absolute;且left:100px;margin-left:100px

</div>

</body>

</html>

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

</div>

</body>

</html>

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

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

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

CSS教程:position屬性

相關(guān)文章

最新評(píng)論

文章分類

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

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

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

CSS教程:position屬性

相關(guān)文章

最新評(píng)論

文章分類

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

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

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕