定位
- position屬性可以控制Web瀏覽器如何以 及在何處顯示特定的元素。
- 可以使用position屬性把一個元素放置到網(wǎng) 頁中的任何位置胖齐。
- 可選值：
- static（默認(rèn)）
- relative（相對）
- absolute（絕對）
- fixed（固定）
相對定位relative
- 每個元素在頁面的文檔流中都有一個自然位置。相 對于這個位置對元素進行移動就稱為相對定位嵌牺。周 圍的元素完全不受此影響挨稿。
- 當(dāng)將position屬性設(shè)置為relative時，則開啟了元素 的相對定位水由。
- 當(dāng)開啟了相對定位以后，可以使用top赛蔫、right砂客、 bottom、left四個屬性對元素進行定位
特點
- 如果不設(shè)置元素的偏移量呵恢，元素位置不會發(fā)生改變鞠值。
- 相對定位不會使元素脫離文本流。元素在文本流中 的位置不會改變渗钉。
- 相對定位不會改變元素原來的特性彤恶。
- 相對定位會使元素的層級提升，使元素可以覆蓋文 本流中的元素晌姚。
<!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屬性來設(shè)置元素的定位
-可選值：
static：默認(rèn)值粤剧，元素沒有開啟定位
relative：開啟元素的相對定位
absolute：開啟元素的絕對定位
fixed：開啟元素的固定定位（也是絕對定位的一種）
*/
/*
當(dāng)元素的position屬性設(shè)置為relative時歇竟，則開啟了元素的相對定位
1.當(dāng)開啟了元素的相對定位以后挥唠，而不設(shè)置偏移量時，元素不會發(fā)生任何變化
2.相對定位是相對于元素在文檔流中原來的位置進行定位
3.相對定位的元素不會脫離文檔流
4.相對定位會使元素提升一個層級
5.相對定位不會改變元素的性質(zhì)焕议，塊還是塊宝磨，內(nèi)聯(lián)還是內(nèi)聯(lián)
*/
position: relative;
/*
當(dāng)開啟了元素的定位（position屬性值是一個非static的值）時，可以通過left right top bottom四個屬性來設(shè)置元素的偏移量
left：元素相對于其定位位置的左側(cè)偏移量
right：元素相對于其定位位置的右側(cè)偏移量
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元素或離他最近 的祖先定位元素進行定位唤锉。
- 當(dāng)將position屬性設(shè)置為absolute時，則開啟 了元素的絕對定位别瞭。
- 當(dāng)開啟了絕對定位以后窿祥，可以使用top、right蝙寨、 bottom晒衩、left四個屬性對元素進行定位嗤瞎。
絕對定位的特點
- 絕對定位會使元素完全脫離文本流。
- 絕對定位的塊元素的寬度會被其內(nèi)容撐開听系。
- 絕對定位會使行內(nèi)元素變成塊元素贝奇。
- 一般使用絕對定位時會同時為其父元素指定一 個相對定位，以確保元素可以相對于父元素進 行定位靠胜。
<!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;
/*
當(dāng)position屬性值設(shè)置為absolute時掉瞳，則開啟了元素的絕對定位
絕對定位：
1.開啟絕對定位，會使元素脫離文檔流
2.開啟絕對定位以后浪漠，如果不設(shè)置偏移量陕习，則元素的位置不會發(fā)生變化
3.絕對定位是相對于離他最近的、開啟了定位的祖先元素進行定位的（一般情況郑藏，開啟了子元素的絕對定位衡查，都會同時開啟父元素的相對定位）
如果所有的祖先元素都沒有開啟定位，則會相對于瀏覽器窗口進行定位
4.絕對定位會使元素提升一個層級
5.絕對定位會改變元素的性質(zhì)：
內(nèi)聯(lián)元素變成塊元素必盖，
塊元素的寬度和高度默認(rèn)都被內(nèi)容撐開
*/
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
- 固定定位的元素會被鎖定在屏幕的某個位置上拌牲，當(dāng) 訪問者滾動網(wǎng)頁時，固定元素會在屏幕上保持不動歌粥。
- 當(dāng)將position屬性設(shè)置為fixed時塌忽，則開啟了元素的 固定定位。
- 當(dāng)開啟了固定定位以后失驶，可以使用top土居、right、
bottom嬉探、left四個屬性對元素進行定位擦耀。
- 固定定位的其他特性和絕對定位類似。
- 對當(dāng)前窗口進行定位（四個角）
<!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;
/*
當(dāng)元素的position屬性設(shè)置fixed時涩堤，則開啟了元素的固定定位
固定定位也是一種絕對定位眷蜓，它的大部分特點都和絕對定位一樣
不同的是：
固定定位永遠(yuǎn)都會相對于瀏覽器窗口進行定位
固定定位會固定在瀏覽器窗口某個位置，不會隨滾動條滾動
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層級
- 當(dāng)元素開啟定位以后就可以設(shè)置z-index這 個屬性胎围。
- 這個屬性可以提升定位元素所在的層級吁系。
- z-index可以指定一個整數(shù)作為參數(shù)，值越 大元素顯示的優(yōu)先級越高白魂，也就是z-index 值較大的元素會顯示在網(wǎng)頁的最上層汽纤。
- 父元素的層級再高，也不會蓋住子元素
<!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;
/*設(shè)置偏移量*/
top: 100px;
left: 100px;
/*
如果定位元素的層級是一樣福荸，則下邊的元素會蓋住上邊的
通過z-index屬性可以用來設(shè)置元素的層級
可以為z-index指定一個正整數(shù)作為值蕴坪，該值將會作為當(dāng)前元素的層級，層級越高敬锐，越優(yōu)先顯示
對于沒有開啟定位的元素不能使用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;
/*
設(shè)置元素的透明背景
opacity可以用來設(shè)置元素背景的透明背传，它需要一個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>
