深入理解CSS定位與層疊

發(fā)布時(shí)間：2016-04-15 16:19:42 作者：佚名

我要評(píng)論

下面小編就為大家?guī)?lái)一篇深入理解CSS定位與層疊。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考

position：static(靜態(tài)定位)

當(dāng)position屬性定義為static時(shí)，可以將元素定義為靜態(tài)位置，所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中應(yīng)有的位置

podisition定位問(wèn)題。所以當(dāng)沒(méi)有定義position屬性時(shí)，并不說(shuō)明該元素沒(méi)有自己的位置，它會(huì)遵循默認(rèn)顯示為靜態(tài)位置，在靜態(tài)定位狀態(tài)下無(wú)法通過(guò)坐標(biāo)值（top,left,right,bottom）來(lái)改變它的位置。

position：absolute(絕對(duì)定位)

當(dāng)position屬性定義為absolute時(shí)，元素會(huì)脫離文檔流，完全不受文檔流的影響，根據(jù)某個(gè)參照物坐標(biāo)來(lái)定位它的位置.當(dāng)絕對(duì)定位元素沒(méi)有顯示的指明top,right,bottom,left定位屬性時(shí)，它還是暫時(shí)未脫離文檔流，并受文檔流的影響，具有相對(duì)定位的特性，但是它在文檔流中的位置已經(jīng)不存在了。如果絕對(duì)定位只顯示的定位x軸或者Y軸，那它只具備這個(gè)方向上的定位能力，另一個(gè)方向仍然顯示為相對(duì)定位的特性。

坐標(biāo)值：
top:表示定位元素頂邊外壁到參照物元素頂部?jī)?nèi)壁的距離
right:表示定位元素右邊外壁到參照物元素右側(cè)內(nèi)壁的距離
left:表示定位元素左邊外壁到參照物元素左側(cè)內(nèi)壁的距離
bottom:表示定位元素底邊外壁到參照物元素底部?jī)?nèi)壁的距離

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div id="box">box
<div id="boxA">boxA</div>
<div id="boxB">boxB
<div id="boxC">boxC</div>
<div id="boxD">boxD</div>
</div>
</div>

CSS Code復(fù)制內(nèi)容到剪貼板

#box{
margin:40px auto;
width:400px;
height:400px;
border:2px red solid;
}
#boxA{
position:absolute;
top:100px;
left:100px;
width:50px;
height:50px;
background: #3E7DB0;
}

大盒子box在整個(gè)網(wǎng)頁(yè)中距頂部40px居中顯示，但是boxA由于position定位為絕對(duì)定位，它脫離了大盒子，距整個(gè)網(wǎng)頁(yè)左邊100px頂部100px，當(dāng)元素定義為絕對(duì)定位，可以根據(jù)結(jié)合它的坐標(biāo)屬性（top,left,bottom,right）來(lái)精確定位它的位置

position:relative(相對(duì)定位)

相對(duì)定位好似一種折中的方法，是在靜態(tài)定位和絕對(duì)定位中去一個(gè)平衡點(diǎn)，所謂相對(duì)定位就是使被應(yīng)用的元素不脫離文檔流，卻能夠通過(guò)坐標(biāo)值以原始位置為參照物進(jìn)行偏移。

坐標(biāo)值：
top:表示定位元素頂邊外壁到原始位置頂部外壁的距離
right:表示定位元素右邊外壁到原始位置元素右側(cè)外壁的距離
left:表示定位元素左邊外壁到原始位置元素左側(cè)外壁的距離
bottom:表示定位元素底邊外壁到原始位置元素底部外壁的距離

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div id="box">
<div id="boxA">boxA</div>
<div id="boxB">boxB
<div id="boxC">boxC</div>
<div id="boxD">boxD</div>
</div>
</div>

CSS Code復(fù)制內(nèi)容到剪貼板

#box{
margin:40px auto;
width:400px;
height:400px;
border:2px red solid;
}
#boxA{
position:relative;
top:100px;
left:100px;
width:50px;
height:50px;
background: #3E7DB0;
}
#boxB{
width:50px;
height:150px;
background: #B9C8C5;
}
#boxC{
width:50px;
height:50px;
background: #1D92C8;
}
#boxD{
width:400px;
height:50px;
background: #086499;
}

大盒子box在整個(gè)網(wǎng)頁(yè)中距頂部40px居中顯示，當(dāng)元素boxA由于position定義為相對(duì)定位，相對(duì)于它本身的位置的位置進(jìn)行偏移，據(jù)原先的位置左100px和頂部100px，當(dāng)遇到文檔流boxD時(shí)，它會(huì)覆蓋boxD。相對(duì)定位雖然偏離了原始位置，但是它的原始位置所占據(jù)的空間仍然保留著，并沒(méi)有被其它元素所占據(jù)。

position：fixed(固定定位)

固定定位是絕對(duì)定位的一種特殊形式，它是以瀏覽器窗口作為參照物來(lái)定義網(wǎng)頁(yè)元素，如果定義某個(gè)元素固定顯示，則該元素不在受文檔流的影響。他始終以瀏覽器窗口來(lái)定位自己顯示的顯示位置，不管瀏覽器窗口如何滾動(dòng)，也不管瀏覽器窗口大小如何變化，該元素都會(huì)顯示在瀏覽器窗口內(nèi)。通俗的說(shuō)就是以瀏覽器窗口的四條邊作為坐標(biāo)系來(lái)定位元素的位置。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div id="box">box </div>
<div id="fixed">fixed</div>

CSS Code復(fù)制內(nèi)容到剪貼板

#box{
margin:40px auto;
width:400px;
height:400px;
border:2px red solid;
position:fixed;
left:100px;
top:100px;
}
#fixed{
height:4000px;
}

當(dāng)把box定義為固定定位時(shí)，box永遠(yuǎn)都是在瀏覽器窗口內(nèi)，fixed屬性還可通過(guò)left，right,top,bottom來(lái)控制從流浪器不同邊框來(lái)進(jìn)行定位。

相對(duì)定位(relative)與絕對(duì)定位(absolute)：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div id="box">box
<div id="boxA">boxA</div>
<div id="boxB">boxB
<div id="boxC">boxC</div>
<div id="boxD">boxD</div>
</div>
</div>

如果box把 position屬性定義為relative，只有它的子元素boxA和boxB position屬性定義為absolute才能相對(duì)box定位，而他的孫子元素boxC和boxD把position定義為absolute并不能相對(duì)box來(lái)定位。但是如果把boxB的position屬性定義為relative，它底下的子元素boxC和boxD就能相對(duì)于父元素boxB來(lái)定位，所以，把position屬性定義為relative的元素，只有它的子元素才能相對(duì)它定位，孫子元素并不能相對(duì)它定位。相對(duì)定位與絕對(duì)定位的結(jié)合使用可以更加精確的控制網(wǎng)頁(yè)元素，設(shè)計(jì)出更強(qiáng)大的布局效果。

position屬性定位小工具：www.linxz.de/css_tool/position_demo.html

層疊：

css可以通過(guò)z-index屬性來(lái)排列不同定位元素之間的層疊順序，該屬性可以設(shè)置任何整數(shù)值，數(shù)值越大，所排列的順序越靠前。

XML/HTML Code復(fù)制內(nèi)容到剪貼板