一篇文章帶你了解css z-index(重疊順序)

iv cssz-index層重疊順序

div層、span層等html標簽層重疊順序樣式z-index，平時CSS使用較少，但也會難免會碰到CSS z-index使用。

從基礎語法到應用案例教程講解學習z-index。

一、z-index語法與結構

z-index 跟具體數字

div{
  z-index:100
}

注意：z-index的數值不跟單位。

z-index的數字越高越靠前，并且值必須為整數和正數（正數的整數）。

二、z-index使用條件

z-index在使用絕對定位 position:absolute屬性條件下使用才能使用。通常CSS讓不同的對象盒子以不同順序重疊排列，CSS就是要z-index樣式屬性。

三、案例

1. z-index重疊順序案例

為了方便觀察，設置3個DIV盒子，分別設置不同css背景顏色，設置相同CSS高度、CSS寬度。分別設置背景顏色)為黑色、紅色、藍色。CSS width為300px，css height為100px。

css代碼（沒加z-index屬性）

<style>
            .div css5 {
                position: relative;
            }


            .div css5-1,
            .div css5-2,
            .div css5-3 {
                width: 300px;
                height: 100px;
                position: absolute;
            }


                .divcss5-1 {


                background: #000;/* 黑色*/
                left: 10px;
                top: 10px
            }


            .divcss5-2 {


                background: #F00;/* 紅色*/
                left: 20px;
                top: 20px
            }


            .divcss5-3 {


                background: #00F;/* 藍色*/
                left: 30px;
                top: 30px
            }
</style>

CSS代碼(加上z-index屬性后) :

<style>
            .div css5 {
                position: relative;
            }


            .div css5-1,
            .div css5-2,
            .div css5-3 {
                width: 200px;
                height: 100px;
                position: absolute;
            }


            .div css5-1 {
                z-index: 10;
                background: #000;/* 黑色*/
                left: 10px;
                top: 10px
            }


            .div css5-2 {
                z-index: 20;
                background: #F00;/* 紅色*/
                left: 20px;
                top: 20px
            }


            .div css5-3 {
                z-index: 15;
              background: #00F;/* 藍色*/
                left: 30px;
                top: 30px
            }
</style>

html代碼

 <div class="divcss5-1"></div>
 <div class="divcss5-2"></div>
 <div class="divcss5-3"></div>

沒加的效果:

加上z-index屬性效果：

2. 案例說明

三個盒子均都使用了絕對定位屬性position樣式，并且設置相同的高度和寬度樣式。為了便于觀察CSS使用left、right屬性并賦予不同值，讓其錯落有致。

Div css5-1 盒子背景為黑色， z-index:10
Div css5-2 盒子背景為紅色， z-index:20
Divcss5-3盒子背景為藍色， z-index:15

為可以看見第一個盒子z-index:10，所以重疊在最下層，而第二個盒子z-index:20，值最大所以最上層重疊，第三個盒子設置z-index:15，居中。

四、總結

本文基于CSS基礎，介紹了如何使用z-index重疊順序樣式，在實際DIV+CSS布局時候CSS需要絕對定位樣式，并且可以使用left、right進行定位，通過不同z-index值實現層重疊順序排列。代碼很簡單，希望能夠幫助你學習。

用圖像覆蓋圖標可以為你的網站交互細節或一組功能加深印象。本文內容將分為兩部分，第一部分創建結構并附加圖標的鏈接。在第二部分中，我們將使用CSS進行設計。

創建結構：在本節中，我們將創建一個基本結構，并為這些圖標附加Font-Awesome的CDN鏈接，這些圖標將用作懸停時的圖標。

“字體真棒”中的圖標的CDN鏈接：

<link rel =” stylesheet” href =““ https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

HTML代碼：

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        Image Overlay Icon using HTML and CSS  
    </title> 
    <link rel="stylesheet" href=  
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head> 
<body> 
    <div class="container"> 
        <h1>GeeksforGeeks</h1> 
        <b>Image Overlay Icon using HTML and CSS</b> 
        <div class="img"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
                 alt="Geeksforgeeks"> 
            <div class="overlay"> 
                <a href="#" class="icon"> 
                   <i class="fa fa-user"></i> 
                </a> 
            </div> 
        </div> 
    </div> 
</body> 

</html>

設計結構：在上面內容中，我們創建了將用作圖像疊加圖標的基本網站的結構。在這部分內容中，我們將設計圖像疊加圖標的結構。

CSS代碼：

<style> 
    body { 
        text-align: center; 
    } 

    h1 { 
        color: green; 
    } 

    /* Image styling */
    img { 
        padding: 5px; 
        height: 225px; 
        width: 225px; 
        border: 2px solid gray; 
        box-shadow: 2px 4px #888888; 

    } 

    /* Overlay styling */
    .overlay { 
        position: absolute; 
        top: 23.5%; 
        left: 32.8%; 
        transition: .3s ease; 
        background-color: gray; 
        width: 225px; 
        height: 225px; 
        opacity: 0; 

    } 

    /* Overlay hover */
    .container:hover .overlay { 
        opacity: 1; 
    } 

    /* Icon styling */
    .icon { 
        color: white; 
        font-size: 92px; 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        text-align: center; 
    } 
</style>

最終解決方案：這是結合以上兩部分內容后的最終代碼。它將顯示圖像疊加圖標。

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        Image Overlay Icon using HTML and CSS  
    </title> 
    <link rel="stylesheet" href=  
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <style> 
        body { 
            text-align: center; 
        } 

        h1 { 
            color: green; 
        } 

        /* Image styling */ 
        img { 
            padding: 5px; 
            height: 225px; 
            width: 225px; 
            border: 2px solid gray; 
            box-shadow: 2px 4px #888888; 
        } 

        /* Overlay styling */ 
        .overlay { 
            position: absolute; 
            top: 23.5%; 
            left: 32.8%; 
            transition: .3s ease; 
            background-color: gray; 
            width: 225px; 
            height: 225px; 
            opacity: 0; 
        } 

        /* Overlay hover */ 
        .container:hover .overlay { 
            opacity: 1; 
        } 

        /* Icon styling */ 
        .icon { 
            color: white; 
            font-size: 92px; 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            text-align: center; 
        } 
</style> 
</head> 

<body> 
    <div class="container"> 
        <h1>GeeksforGeeks</h1> 
        <b>Image Overlay Icon using HTML and CSS</b> 
        <div class="img"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
                 alt="Geeksforgeeks"> 
            <div class="overlay"> 
                <a href="#" class="icon"> 
                   <i class="fa fa-user"></i> 
                </a> 
            </div> 
        </div> 
    </div> 
</body> 

</html>

最終輸出效果：

最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學習資料，只要私信：“前端"等3秒后即可獲取地址，

里面概括應用網站開發，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個知識點高級進階干貨的相關視頻資料，等你來拿

據可視化-使用Python進行圖表疊加

數據可視化對于分析數據至關重要。如果您無法”看見“數據 - 并以多種方式查看數據 - 那么您將很難分析這些數據。有很多方法可以進行數據可視化，值得慶幸的是，您可以在分析數據過程中使用pandas，matplotlib和seaborn等模塊，進行強大的數據可視化轉換。

當我得到一個新的數據集時，我喜歡做的事情之一就是嘗試將數據點進行相互對比，看看是否能有什么新發現。為此，我喜歡將圖表相互疊加以查找數據或者圖表中的任何關聯。這項工作使用matplotlib模塊很容易做到，但是一開始使用雙軸可能會有些混亂。

如果您想了解更多關于數據可視化或者是matplotlib模塊相關信息，下面列出了一些書籍和網站：

Data Visualization with Python and JavaScript: Scrape, Clean, Explore & Transform Your Data
Mastering matplotlib
Matplotlib tutorial
How to make beautiful data visualizations in Python with matplotlib

我希望看到有關聯的數據相互疊加的圖表-比如銷售收入和銷售的部件數量 - 就是是收入與數量的雙重疊加。我的一種可視化數據方法的例子如下圖1所示。

圖1 數據可視化：收入 vs 數量圖表疊加

在這個圖表中，我們將每月銷售收入（藍線）圖表與已售出商品數量圖表（多色條形圖）進行重疊。這種類型的圖表讓我可以快速查看項目的收入與數量之間是否存在相關性。

我還沒有找到一種快速簡單的方法在不破壞數據的基礎上構建多色條形圖,并且我還需要手動構建每個彩色部分...所以如果您有更好的方式，請告訴我。

例子

下面是構建此圖表的代碼，數據來源（https://pythondata.com/wp-content/uploads/2017/06/sales.csv）

以上只是使用python進行數據可視化的一種方法。希望它是您可能沒有想到的方法的一個好例子。

英文原文：https://pythondata.com/visualizing-data-overlaying-charts/
譯者：少年

在線咨詢

上一篇：寫個網頁更簡單了！讓AI根據手繪原型生成HTML - 教程+代碼
下一篇：Nginx系列：配置跳轉的常用方式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商