怎么在CSS中使用z-index屬性-創(chuàng)新互聯(lián)

本篇文章為大家展示了怎么在CSS中使用z-index屬性，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)成立10余年來，這條路我們正越走越好，積累了技術(shù)與客戶資源，形成了良好的口碑。為客戶提供網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)、域名注冊、網(wǎng)絡(luò)營銷、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。網(wǎng)站是否美觀、功能強(qiáng)大、用戶體驗(yàn)好、性價(jià)比高、打開快等等，這些對于網(wǎng)站建設(shè)都非常重要，成都創(chuàng)新互聯(lián)通過對建站技術(shù)性的掌握、對創(chuàng)意設(shè)計(jì)的研究為客戶提供一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進(jìn)步。

默認(rèn)的擺放規(guī)則


假定元素沒有指定z-index屬性，那么元素按照如下順序疊放（從底到頂）

    根元素的背景和邊界
    普通流(無定位)里的塊元素(沒有position或者position:static;)按HTML中的出現(xiàn)順序堆疊
    定位元素按HTML中的出現(xiàn)順序堆疊
   怎么在CSS中使用z-index屬性

浮動(dòng)

對于浮動(dòng)的塊元素來說，堆疊順序變得有些不同。浮動(dòng)塊元素被放置于非定位塊元素與定位塊元素之間：

    根元素的背景與邊框
    位于普通流中的后代塊元素按照它們在 HTML 中出現(xiàn)的順序堆疊
    浮動(dòng)塊元素
    常規(guī)流中的后代行內(nèi)元素
    后代中的定位元素按照它們在 HTML 中出現(xiàn)的順序堆疊
怎么在CSS中使用z-index屬性

使用 z-index

如果需要改變默認(rèn)的擺放順序，只需給元素指定z-index。z-index必須是整數(shù)，體現(xiàn)了元素在z軸的位置：

    底層：距離觀察者最遠(yuǎn)
    ……
    -3 層
    -2 層
    -1 層
    0 層 （默認(rèn)）
    1 層
    2 層
    3 層
    ……
    頂層：最接近觀察者

沒有指定z-index的時(shí)候，所有元素默認(rèn)在0層渲染。多個(gè)元素的z-index屬性相同時(shí)，將按照上文描述的順序布局。

使用z-index排序的例子：
怎么在CSS中使用z-index屬性

注意，div#5的z-index無效，因?yàn)槲粗付╬osition屬性。
堆疊上下文

指定z-index屬性將構(gòu)造一個(gè)堆疊上下文。

以下元素構(gòu)成堆疊上下文指：

    根元素html
    定位元素，且其z-index值不為auto
    opacity小于1的元素
    在移動(dòng)WebKit、Chrome22+以上，指定position: fixed的元素總是會構(gòu)造堆疊上下文，即使z-index為auto。

堆疊上下文中的子元素按照前述順序擺放。堆疊上下文內(nèi)部的子堆疊上下文的z-index只在父堆疊上下文中有意義。

總而言之：

    z-index不為auto，opacity小于1的元素會構(gòu)建堆疊上下文。
    堆疊上下文可以嵌入其他堆疊上下文。
    每個(gè)堆疊上下文和它的同級上下文是獨(dú)立的。
    每個(gè)堆疊上下文是自包含的。
怎么在CSS中使用z-index屬性


上述內(nèi)容就是怎么在CSS中使用z-index屬性，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標(biāo)題：怎么在CSS中使用z-index屬性-創(chuàng)新互聯(lián)
分享地址：http://bm7419.com/article34/dpcose.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、軟件開發(fā)、品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、App開發(fā)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)