定位
- position屬性可以控制Web瀏覽器如何以 及在何處顯示特定的元素。
- 可以使用position屬性把一個元素放置到網 頁中的任何位置。
- 可選值：
- static（默認）
- relative（相對）
- absolute（絕對）
- fixed（固定）
相對定位relative
- 每個元素在頁面的文檔流中都有一個自然位置。相 對于這個位置對元素進行移動就稱為相對定位。周 圍的元素完全不受此影響。
- 當將position屬性設置為relative時，則開啟了元素 的相對定位。
- 當開啟了相對定位以后，可以使用top、right、 bottom、left四個屬性對元素進行定位
特點
- 如果不設置元素的偏移量，元素位置不會發生改變。
- 相對定位不會使元素脫離文本流。元素在文本流中 的位置不會改變。
- 相對定位不會改變元素原來的特性。
- 相對定位會使元素的層級提升，使元素可以覆蓋文 本流中的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相對定位</title>
<style type="text/css">
.box1{
height: 200px;
background-color: red;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
定位：
- 定位指的就是將指定的元素擺放到頁面的任意位置
通過定位可以任意的擺放元素
- 通過position屬性來設置元素的定位
-可選值：
static：默認值，元素沒有開啟定位
relative：開啟元素的相對定位
absolute：開啟元素的絕對定位
fixed：開啟元素的固定定位（也是絕對定位的一種）
*/
/*
當元素的position屬性設置為relative時，則開啟了元素的相對定位
1.當開啟了元素的相對定位以后，而不設置偏移量時，元素不會發生任何變化
2.相對定位是相對于元素在文檔流中原來的位置進行定位
3.相對定位的元素不會脫離文檔流
4.相對定位會使元素提升一個層級
5.相對定位不會改變元素的性質，塊還是塊，內聯還是內聯
*/
position: relative;
/*
當開啟了元素的定位（position屬性值是一個非static的值）時，可以通過left right top bottom四個屬性來設置元素的偏移量
left：元素相對于其定位位置的左側偏移量
right：元素相對于其定位位置的右側偏移量
top：元素相對于其定位位置的上邊的偏移量
bottom：元素相對于其定位位置下邊的偏移量
通常偏移量只需要使用兩個就可以對一個元素進行定位，
一般選擇水平方向的一個偏移量和垂直方向的偏移量來為一個元素進行定位
*/
left: 100px;
top: 200px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.s1{
position: relative;
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">我是一個span</span>
</body>
</html>
絕對定位absolute
- 絕對定位指使元素相對于html元素或離他最近 的祖先定位元素進行定位。
- 當將position屬性設置為absolute時，則開啟 了元素的絕對定位。
- 當開啟了絕對定位以后，可以使用top、right、 bottom、left四個屬性對元素進行定位。
絕對定位的特點
- 絕對定位會使元素完全脫離文本流。
- 絕對定位的塊元素的寬度會被其內容撐開。
- 絕對定位會使行內元素變成塊元素。
- 一般使用絕對定位時會同時為其父元素指定一 個相對定位，以確保元素可以相對于父元素進 行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
當position屬性值設置為absolute時，則開啟了元素的絕對定位
絕對定位：
1.開啟絕對定位，會使元素脫離文檔流
2.開啟絕對定位以后，如果不設置偏移量，則元素的位置不會發生變化
3.絕對定位是相對于離他最近的、開啟了定位的祖先元素進行定位的（一般情況，開啟了子元素的絕對定位，都會同時開啟父元素的相對定位）
如果所有的祖先元素都沒有開啟定位，則會相對于瀏覽器窗口進行定位
4.絕對定位會使元素提升一個層級
5.絕對定位會改變元素的性質：
內聯元素變成塊元素，
塊元素的寬度和高度默認都被內容撐開
*/
position: absolute;
/*left: 100px;
top: 100px;*/
}
.box3{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
.box4{
width: 300px;
height: 300px;
background-color: orange;
/*開啟box4的相對定位*/
/*position: relative;*/
}
.s1{
width: 100px;
height: 100px;
background-color: yellow;
/*開啟絕對定位*/
position: absolute;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box5">
<div class="box4">
<div class="box2"></div>
</div>
</div>
<div class="box3"></div>
<span class="s1">我是一個span</span>
</body>
</html>
固定定位fixed
- 固定定位的元素會被鎖定在屏幕的某個位置上，當 訪問者滾動網頁時，固定元素會在屏幕上保持不動。
- 當將position屬性設置為fixed時，則開啟了元素的 固定定位。
- 當開啟了固定定位以后，可以使用top、right、
bottom、left四個屬性對元素進行定位。
- 固定定位的其他特性和絕對定位類似。
- 對當前窗口進行定位（四個角）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
當元素的position屬性設置fixed時，則開啟了元素的固定定位
固定定位也是一種絕對定位，它的大部分特點都和絕對定位一樣
不同的是：
固定定位永遠都會相對于瀏覽器窗口進行定位
固定定位會固定在瀏覽器窗口某個位置，不會隨滾動條滾動
IE6不支持固定定位
*/
position: fixed;
left: 0px;
top: 0px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
<div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
z-index層級
- 當元素開啟定位以后就可以設置z-index這 個屬性。
- 這個屬性可以提升定位元素所在的層級。
- z-index可以指定一個整數作為參數，值越 大元素顯示的優先級越高，也就是z-index 值較大的元素會顯示在網頁的最上層。
- 父元素的層級再高，也不會蓋住子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的層級</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*開啟絕對定位*/
position: absolute;
/*設置偏移量*/
top: 100px;
left: 100px;
/*
如果定位元素的層級是一樣，則下邊的元素會蓋住上邊的
通過z-index屬性可以用來設置元素的層級
可以為z-index指定一個正整數作為值，該值將會作為當前元素的層級，層級越高，越優先顯示
對于沒有開啟定位的元素不能使用z-index
*/
z-index: 25;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*position: relative;
z-index: 3;*/
position: absolute;
top: 200px;
left: 200px;
z-index: 30;
/*
設置元素的透明背景
opacity可以用來設置元素背景的透明，它需要一個0-1之間的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
*/
opacity: 0.5;
/*
opacity屬性在IE8及以下的瀏覽器中不支持
IE8及以下的瀏覽器需要使用如下屬性代替
alpha(opacity=透明度)
透明度，需要一個0-100之間的值
0 表示完全透明
100 表示完全不透明
50 半透明
這種方式支持IE6，但是這種效果在IE Tester中無法測試
*/
filter: alpha(opacity=50);
}
.box4{
width: 200px;
height: 200px;
background-color: orange;
/*開啟相對定位*/
position: relative;
/*父元素的層級再高，也不會蓋住子元素*/
z-index: 20;
top: 500px;
}
.box5{
width: 100px;
height: 100px;
background-color: skyblue;
/*開啟絕對定位*/
position: absolute;
z-index: 10;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
</html>
