這篇文章主要介紹了Css定位元素中層疊現(xiàn)象的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站，為您提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設(shè)計，對服務(wù)成都柔性防護(hù)網(wǎng)等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗。創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報價服務(wù),我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！

Css定位元素的層疊現(xiàn)象

給元素添加定位，可能會出現(xiàn)元素的層疊，層疊的順序一般滿足以下規(guī)律：

父子關(guān)系：子元素會層疊在父元素上。

非父子關(guān)系。

元素類型 層疊順序

都是非定位元素 在標(biāo)準(zhǔn)流中一般不存在層疊現(xiàn)象

1個是定位元素，1個是非定位元素 定位元素會層疊在非定位元素上

都是定位元素 默認(rèn)后面的定位元素層疊在前面的定位元素上，使用css屬性z-index來控制層疊順序

z-index屬性

z-index屬性用來設(shè)置定位元素的層疊順序（僅對定位元素有效，非static），取值可以是正整數(shù)、負(fù)整數(shù)、0；

比較規(guī)則：

如果是兄弟關(guān)系：z-index越大，層疊在越上面，z-index相等，寫在后面的元素層疊在上面；

如果不是兄弟關(guān)系：各自從元素本身以及祖先元素中，找出最鄰近（兄弟關(guān)系）的2個定位元素進(jìn)行比較，而且在2個定位元素必須有設(shè)置z-index的具體數(shù)值；

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Css定位元素中層疊現(xiàn)象的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!