CSS 層疊屬性解析：z-index 和position
#在CSS中，z-index和position是兩個常用的層疊屬性，用來控制元素的疊放順序和定位方式。本文將詳細解析這兩個屬性，並提供相關程式碼範例。
一、z-index屬性
z-index屬性用來控制元素的疊放順序。它接受一個整數值作為參數，數值越大，元素越前面顯示。預設情況下，元素的z-index值為0。
語法：z-index: 數值;
要注意的是，只有定位元素（即position值為relative、absolute或fixed的元素）才能使用z-index屬性。定位元素的z-index屬性會影響它的子元素以及其他父元素和兄弟元素的顯示順序。
下面是一個範例，示範了z-index屬性的使用：
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
z-index: 1;
}
#div2 {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>在上面的程式碼中，div1和div2分別是兩個定位元素，div2的z-index值較大，所以div2會覆蓋在div1上方顯示。
二、position屬性
position屬性用來控制元素的定位方式。常見的值有static、relative、absolute和fixed。
下面是一個範例，示範了position屬性的使用：
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 50px;
left: 50px;
}
#div2 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>在上面的程式碼中，div2使用了position:absolute屬性，使其相對於div1進行定位。透過調整top和left屬性的值，可以改變div2的位置。
總結：
z-index和position是CSS中常用的層疊屬性，透過它們可以控制元素的疊放順序和定位方式。透過合理地使用這兩個屬性，可以實現豐富多樣的頁面佈局效果。
以上就是關於CSS層疊屬性z-index和position的解析，以及相關的程式碼範例。希望對你有幫助。
以上是CSS 層疊屬性解析：z-index 和 position的詳細內容。更多資訊請關注PHP中文網其他相關文章！
