深入理解css中position屬性及z-index屬性(推薦)
我要評(píng)論在網(wǎng)頁(yè)設(shè)計(jì)中，position屬性的使用是非常重要的。有時(shí)如果不能認(rèn)識(shí)清楚這個(gè)屬性，將會(huì)給我們帶來(lái)很多意想不到的困難。
position屬性共有四種不同的定位方法，分別是static、fixed、relative、absolute。最后將會(huì)介紹和position屬性密切相關(guān)的z-index屬性。
第一部分：position: static
static定位是HTML元素的默認(rèn)值，即沒(méi)有定位，元素出現(xiàn)在正常的流中，因此，這種定位就不會(huì)收到top，bottom,left,right的影響。
如html代碼如下：
<div class="wrap">
<div class="content"></div>
</div>
css代碼如下：
.wrap{width: 300px;height: 300px; background: red;}
.content{position: static; top:100px; width: 100px;height: 100px; background: blue;}
效果圖如下：
我們發(fā)現(xiàn)，雖然設(shè)置了static以及top，但是元素仍然出現(xiàn)在正常的流中。
第二部分：fixed定位
fixed定位是指元素的位置相對(duì)于瀏覽器窗口是固定位置，即使窗口是滾動(dòng)的它也不會(huì)滾動(dòng)，且fixed定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間，且它會(huì)和其他元素發(fā)生重疊。
html代碼如下：
<div class="content">我是使用fix來(lái)定位的?。。∷晕蚁鄬?duì)于瀏覽器窗口，一直不動(dòng)。</div>
css代碼如下：
body{height:1500px; background: green; font-size: 30px; color:white;}
.content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;}
效果圖如下：
即右下角的div永遠(yuǎn)不會(huì)動(dòng)，就像經(jīng)常彈出來(lái)的廣告！??！
值得注意的是：fixed定位在IE7和IE8下需要描述！DOCTYPE才能支持。
第三部分：relative定位
相對(duì)定位元素的定位是相對(duì)它自己的正常位置的定位。
關(guān)鍵：如何理解其自身的坐標(biāo)呢？
讓我們看這樣一個(gè)例子，hmtl如下：
<h2>這是位于正常位置的標(biāo)題</h2> <h2 class="pos_bottom">這個(gè)標(biāo)題相對(duì)于其正常位置向下移動(dòng)</h2> <h2 class="pos_right">這個(gè)標(biāo)題相對(duì)于其正常位置向右移動(dòng)</h2>
css代碼如下：
.pos_bottom{position:relative; bottom:-20px;}
.pos_right{position:relative;left:50px;}
效果圖如下：
即bottom:-20px;；向下移動(dòng)。 left:50px;向右移動(dòng)。
即可以理解為：移動(dòng)后是移動(dòng)前的負(fù)的位置。
比如上例中，移動(dòng)后是移動(dòng)前負(fù)的bottom:-20px;即移動(dòng)后是移動(dòng)前bottom:20px;也就是說(shuō)，移動(dòng)后是移動(dòng)前的向下20px；
又如：left:50px;移動(dòng)后是移動(dòng)前左邊的-50px;那么也就是說(shuō)移動(dòng)后是移動(dòng)前的右邊的50px。
即：移動(dòng)后對(duì)于移動(dòng)前：如果值為負(fù)數(shù)，則直接換成整數(shù)；如果值為整數(shù)，則直接改變相對(duì)方向。
弄清楚了relative是如何移動(dòng)的，下面我們看一看移動(dòng)之后是否會(huì)產(chǎn)生其他的影響。
html代碼如下：
<h2>這是一個(gè)沒(méi)有定位的標(biāo)題</h2> <h2 class="pos_top">這個(gè)標(biāo)題是根據(jù)其正常位置向上移動(dòng)</h2> <p><b>注意:</b> 即使相對(duì)定位元素的內(nèi)容是移動(dòng),預(yù)留空間的元素仍保存在正常流動(dòng)。</p>
css代碼如下：
h2.pos_top{position:relative;top:-35px;}
效果圖如下：
根據(jù)之前的說(shuō)法，top:-35px；值是負(fù)數(shù)，則直接換成正數(shù)，即移動(dòng)后相對(duì)與移動(dòng)前向上偏移了35px；我們發(fā)現(xiàn)于上，移動(dòng)后和上面的元素發(fā)生了重疊；于下，即使相對(duì)元素的內(nèi)容移動(dòng)了，但是預(yù)留空間的元素仍然保存在正常流動(dòng)，也就是說(shuō)相對(duì)移動(dòng)之后，不會(huì)對(duì)下面的其他元素造成影響。
第四部分：absolute定位
絕對(duì)定位的元素相對(duì)于最近的已定位父元素，如果元素沒(méi)有已定位的父元素，那么它的位置相對(duì)于<html>。
下面舉幾個(gè)例子：
例子1：
<title>絕對(duì)定位</title>
<style> body{background:green;}
.parent{ width: 500px;height: 500px;background: #ccc;}
.son{ width: 300px;height: 300px;background: #aaa;}
span{position: absolute; right: 30px; background: #888;}
</style>
<div class="parent">
<div class="son">
<span>什么？</span>
</div>
</div>
效果如下：
即我只在span中設(shè)置了position:absolute；而在其父元素中都沒(méi)有，于是它的位置是相對(duì)于html的。
例2:
.son{position: relative; width: 100px;height: 100px;background: #aaa; }
相較于上一個(gè)例子，我只修改了class為son的元素的css，設(shè)置為position：relative；效果圖如下：
于是，我們發(fā)現(xiàn)現(xiàn)在span的位置是相對(duì)于設(shè)有position屬性的class為son的父元素的。
例3：
.parent{position: absolute; width: 300px;height: 300px;background: #ccc;}
這個(gè)例子我只是修改了第一個(gè)例子中的css--設(shè)置了position:absolute；效果如下：
于是我們發(fā)現(xiàn)，現(xiàn)在span的定位是相對(duì)于具有position:absolute的屬性的class為parent的父元素。
例4：
.parent{position:fixed; width: 300px;height: 300px;background: #ccc;}
相對(duì)于例1，我添加了fixed的position屬性，發(fā)現(xiàn)結(jié)果和例3是一模一樣的。
例5：
.parent{position:static; width: 300px;height: 300px;background: #ccc;}
相對(duì)于例1，我添加了static的position屬性（即html的默認(rèn)屬性），結(jié)果和例1是一樣的。
綜上所述，當(dāng)某個(gè)absolute定位元素的父元素具有position:relative/absolute/fixed時(shí)，定位元素都會(huì)依據(jù)父元素而定位，而父元素沒(méi)有設(shè)置position屬性或者設(shè)置了默認(rèn)屬性，那么定位屬性會(huì)依據(jù)html元素來(lái)定位。
第五部分：重疊的元素--z-index屬性
首先聲明：z-index只能在position屬性值為relative或absolute或fixed的元素上有效。
基本原理是：z-index的值可以控制定位元素在垂直于顯示屏幕方向（z軸）上的堆疊順序(stack order),值大的元素發(fā)生重疊時(shí)會(huì)在值小的元素上面。
下面我們通過(guò)幾個(gè)例子繼續(xù)來(lái)理解這個(gè)屬性。
例1：
即son1和son2是parent的兩個(gè)子元素，效果圖如下：
這是沒(méi)有使用z-index，我們發(fā)現(xiàn)son2在son1之上，這是因?yàn)閟on2在html中排在了son1之后，所以后來(lái)者將前者覆蓋，如果我們顛倒以下兩者的順序，就會(huì)發(fā)現(xiàn)藍(lán)色(son1)在上了。
例2：
在son1中加入z-index：1；可以發(fā)現(xiàn)效果如下：
也就是說(shuō)son2的index值是小于1的。
如果我們給son2也加上z-index:1;呢？結(jié)果得到黃色(son2)就在上面了。（因?yàn)橐坏﹝-index值相等，情況就和都不設(shè)置index值一樣了）
例3：
在son2中加入z-index:5;可以發(fā)現(xiàn)效果如下：
即黃色(son2)又在上面了，這個(gè)很簡(jiǎn)單，不作過(guò)多討論。
例4：
在父元素添加z-index:10;
在son1和son2添加z-index:5; 這樣理論上父元素就會(huì)在上面（黃色覆蓋藍(lán)色和黃色）；
結(jié)果如下：
結(jié)果沒(méi)有變!!!!! 這就說(shuō)明父元素和子元素不能做z-index的比較?。?！但真的是這樣嗎？看下一個(gè)例子：
例5：
把兩個(gè)子元素的z-index值同時(shí)設(shè)置為-5；父元素不設(shè)置z-index屬性。結(jié)果如下：
成功?。≌f(shuō)明在父元素和子元素之間還是可以作比較的?。?！只是需要我們把子元素的z-index值設(shè)為負(fù)數(shù)。
例6：
我們?cè)诶?的基礎(chǔ)上再給父元素添加一個(gè)z-index:10，講道理~應(yīng)該也可以得到和例5相同的結(jié)果吧！！
然而.... 看來(lái)我們不能設(shè)置父元素的z-index值，否則就不能出現(xiàn)我們想要的效果。下面再看一個(gè)有趣的例子!
例7：
我們根據(jù)例6的經(jīng)驗(yàn)不設(shè)置父元素的值，現(xiàn)在設(shè)置son1(藍(lán)色)的z-index為5，son2的z-index為-5，看下面的結(jié)果：
即son1在最上面，父元素在中間，son2在最下面。
對(duì)于z-index的探索就這樣結(jié)束了嗎？？當(dāng)然沒(méi)有，看下面幾個(gè)更為有趣的例子吧。
例8：
代碼如下：
效果如下：
雖然parent1和parent2分別是son1和son2的父元素，按照我們之前的理解，父元素是不可添加z-index值的，否則會(huì)導(dǎo)致錯(cuò)誤。但是這里parent1和parent2相對(duì)于body又是子元素，他倆是同級(jí)的，所以就可以進(jìn)行比較了。且此時(shí)parent1的子元素son1（藍(lán)色）在上。
例9：
如果我們?cè)诶?的基礎(chǔ)上，把parent2的z-index值設(shè)為20，就會(huì)發(fā)現(xiàn)如下效果：
即parent2在上的同時(shí)son2也會(huì)同時(shí)在上。這也就是所謂的“拼爹”了?。?/p>
例10.同樣在例7的基礎(chǔ)上，我們不設(shè)置parent1和parent2和son2的index值，而只設(shè)置son1的z-index值為10，效果如下:
即原本在下面的藍(lán)色son1被提上來(lái)了，而沒(méi)有把父元素（parent1）提上了，誒，不孝順啊??！
例11.顯然，在例10的基礎(chǔ)上，如果我們把son2的index值設(shè)置的比son1的大，如20，那么son2就會(huì)覆蓋son1了，并且都在兩個(gè)父元素只上了！！
效果如下圖：
例12.當(dāng)然，如果我們把兩個(gè)son的z-index都設(shè)置位負(fù)數(shù)如-5，那么兩者就都會(huì)被父元素所覆蓋：
第六部分：總結(jié)
這一部分知識(shí)還是非常有意思的，希望大家可以繼續(xù)探索，當(dāng)然如果通過(guò)這篇博文給予大家一點(diǎn)點(diǎn)的幫助那就再好不過(guò)了！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了CSS中的z-index屬性基本使用教程,z-index主要用來(lái)控制層疊級(jí)別,注意IE瀏覽器下的效果可能會(huì)有點(diǎn)特殊...需要的朋友可以參考下2016-03-05
深入解析CSS中z-index屬性對(duì)層疊順序的處理
這篇文章主要介紹了CSS中z-index屬性對(duì)層疊順序的處理,分情況講解了各種曾跌情況下哪個(gè)box更靠近用戶,需要的朋友可以參考下2016-03-05- 在這篇文章里，我們會(huì)準(zhǔn)確的說(shuō)明究竟什么是Z-index，它為什么會(huì)這么不為人所了解，并一起討論一些關(guān)于它的實(shí)際使用中的問(wèn)題2014-11-04
- 在這篇文章里，我們會(huì)準(zhǔn)確的說(shuō)明究竟什么是Z-index，它為什么會(huì)這么不為人所了解，并一起討論一些關(guān)于它的實(shí)際使用中的問(wèn)題。我們同時(shí)會(huì)描述一些會(huì)遇到的瀏覽器間的差異，2014-10-22
z-index屬性是用來(lái)設(shè)置元素的堆疊順序或者叫做元素層級(jí)，z-index的值越大，元素的層級(jí)越高，本文給大家講解CSS 中的 z-index 屬性實(shí)例代碼，感興趣的朋友跟隨小編一起看看2023-05-29
