z-index屬性介紹
- 只有設定了定位我們才會使用到該
z-index屬性，如：固定定位、相對定位、絕對定位， - 定位元素默認的
z-index屬性值是0， - 如果
2個定位的元素都沒有設定z-index屬性，后者會覆寫到前者， - 如果
2個定位的元素都設定了z-index屬性，并且數值一樣大還是后者會覆寫到前者， z-index屬性的屬性值大的就會覆寫小，就是設定元素的層級，
z-index屬性實踐
-
用實踐證明這句話，如果
2個定位的元素都沒有設定z-index屬性，后者會覆寫到前者， -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>z-index屬性</title>
<style>
div{
width: 200px;
height: 200px;
}
.div1{
background-color: red;
position: relative;
top: 50px;
left: 50px;
}
.div2{
background-color: slateblue;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
-
結果圖
- 用實踐來證明這句話，如果
2個定位的元素都設定了z-index屬性，并且數值一樣大還是后者會覆寫到前者， -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>z-index屬性</title>
<style>
div{
width: 200px;
height: 200px;
}
.div1{
background-color: red;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
}
.div2{
background-color: slateblue;
position: relative;
left: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
-
結果圖
-
用實踐來證明這句話，
z-index屬性的屬性值大的就會覆寫小，就是設定元素的層級， -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>z-index屬性</title>
<style>
div{
width: 200px;
height: 200px;
}
.div1{
background-color: red;
position: relative;
top: 50px;
left: 50px;
z-index: 3;
}
.div2{
background-color: slateblue;
position: relative;
left: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
-
結果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/85238.html
標籤：Html/Css
上一篇：css基礎-定位+網頁布局案例
下一篇：html常用標簽