CSS三大定位原理&Z-index解析
阿新 • • 發佈：2019-02-02
一、理解定位（static是預設的）
原始圖—不加定位
1.absolute(絕對定位)
1.脫離標準流，在頁面中不佔位置（浮起來）
2.如果沒有父元素，則相對於body定位；如果有父元素，但父元素沒有定位，那麼還是相對於body定位；如果父元素有定位，那麼相對於父元素來定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style 2.relative(相對定位)
1.不脫離標準流，在頁面中佔位置
2.相對於自己原來的位置來進行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.c1{
width: 100px;
height: 100px;
background-color: brown;
}
.c2{
width: 100px;
height: 100px;
background-color: blue;
position: relative;/*相對定位，佔位置，相對於自己原來的位置來定位*/
left: 20px;
top:20px;
}
.c3{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>3.fixed(固定定位)
1.脫離標準流，在頁面中不佔位置
2.不管頁面有多大，永遠相對於瀏覽器的邊框來定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.c1{
width: 100px;
height: 100px;
background-color: brown;
}
.c2{
width: 100px;
height: 100px;
background-color: blue;
}
.c3{
width: 100px;
height: 100px;
background-color: black;
position: fixed;/*固定定位，不佔位置，永遠相對於瀏覽器來定位，不管視窗上下拉動，都不會消失（如廣告位）*/
left:20px;
top:20px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>二、z-index解析
設定元素堆疊順序
基本支援所以主流瀏覽器
該元素可擁有負的屬性值
Z-index只能在定位元素上奏效（position:absolute）
Z-index的值是設定一個定位元素沿Z軸的位置，其值越大，離使用者越進，所以若兩個定位元素，Z-index值越大的將會覆蓋值越小的定位元素
程式碼解析
首先沒有Z-index
.c1{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
left:20px;
top:20px;
}
.c2{
width: 50px;
height: 50px;
background-color:blue;
position: absolute;
}效果是：藍色定位元素在黑色定位元素上面
加Z-index，使得黑色定位元素在藍色上面
.c1{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
left:20px;
top:20px;
z-index: 1;/*值只要比另一個定位元素的值大，就會在另一個定位元素之上*/
}
.c2{
width: 50px;
height: 50px;
background-color:blue;
position: absolute;
z-index: 0;
}