z-index無效&注意事項

時間 2019-12-11

標籤 index 無效注意事項简体版

原文原文鏈接

1.z-index只能做用在position爲absolute,relative,fixed的非static元素上css

2.z-index只能在同等級元素上做用，沒法在父元素和子元素上起做用（父元素和別的父元素的子元素這樣是無效的）。html

3.看2的下面例子：本身去運行一下就能夠理解了。反正記住用z-index要在同一個級別的元素用。把下面的紅色部分分別刪和不刪比較下。spa

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
border:none;
}
</style>
</head>
<body>
    <div style='width:100%;height:1000px;'>
        <div id='父1' style='width:200px;height:100px;position:relative;background:green;top:0px;z-index:3;'>
            <div id='子1' style='width:100px;height:100px;position:absolute;top:100px;left:30px;background:white;border:1px solid blue;'>
                子1
            </div>
        </div>
        <div id='父2' style='width:200px;height:100px;position:absolute;background:red;left:30px;top:50px;z-index:2;'>紅色</div>
        <div style='width:200px;height:100px;position:absolute;background:yellow;left:60px;top:120px;z-index:1;'>黃色</div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

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