z-index

時間 2019-11-17

標籤 index 简体版

原文原文鏈接

z-index

z-index的四大特性 : html

　　　　1. z-index 值表示誰壓着誰---數值大的壓蓋數值小的.ide

　　　　2.只有定了位的元素,纔有z-index ,也就是說 ,無論相對定位,絕對定位,固定定位,均可以使用z-index ,而浮動元素不能使用z-index.spa

　　　　3.z-index 值沒有單位,就是一個正整數,默認的z-index 值爲 0 ,若是你們都沒有z-index或者z-index值都同樣,那麼誰寫在 HTML 後面,誰在上面壓着.定位了元素,永遠壓住沒有定位的元素.code

　　　　4.從父現象:父親慫了,兒子在厲害也沒用.htm

示例 : blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            width: 0;
            height: 0;
        }
        .top1{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
        }
        .top1 .top1-1{
            width: 50px;
            height: 50px;
            background-color: #333;
            position: absolute;
            top: 70px;
            left: 150px;
        }
        .top2{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
        .top2 .top2-2{
            width: 50px;
            height: 50px;
            background-color: green;
            position: absolute;
            left: 150px;
        }
    </style>
</head>
<body>
    <div class="top1">
        <div class="top1-1"></div>
    </div>
    <div class="top2">
        <div class="top2-2"></div>
    </div>
</body>
</html>

View Code

由於top2的權重高於top1的權重,因此top2-2會覆蓋top1-1.it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            width: 0;
            height: 0;
        }
        .top1{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
            z-index: 5;
        }
        .top1 .top1-1{
            width: 50px;
            height: 50px;
            background-color: #333;
            position: absolute;
            top: 70px;
            left: 150px;
            z-index: 100;
        }
        .top2{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            z-index: 4;
        }
        .top2 .top2-2{
            width: 50px;
            height: 50px;
            background-color: green;
            position: absolute;
            left: 150px;
            z-index: 200;
        }
    </style>
</head>
<body>
    <div class="top1">
        <div class="top1-1"></div>
    </div>
    <div class="top2">
        <div class="top2-2"></div>
    </div>
</body>
</html>

從父現象

雖然top2-2的z-index 大於top1-1 的z-index .可是因爲他們的父類,io

top2 的z-index 小於 top1 的z-index .因此會造成top1-1 覆蓋 top2-2. 這就是父類慫了兒子在牛逼也沒用.event

相關標籤/搜索

zindex

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。