CSS屬性之定位屬性（圖文詳解）
我要評論CSS的定位屬性有三種，分別是絕對定位、相對定位、固定定位。
position: absolute; <!-- 絕對定位 --> position: relative; <!-- 相對定位 --> position: fixed; <!-- 固定定位 -->
下面逐一介紹。
相對定位
相對定位：讓元素相對于自己原來的位置，進行位置調(diào)整（可用于盒子的位置微調(diào)）。
我們之前學習的背景屬性中，是通過如下格式：background-position:向右偏移量 向下偏移量;
但這回的定位屬性，是通過如下格式：
position: relative;
left: 50px;
top: 50px;
相對定位的舉例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
body{
margin: 0px;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid red;
}
.div2{
position: relative;/*相對定位：相對于自己原來的位置*/
left: 50px;/*橫坐標：正值表示向右偏移，負值表示向左偏移*/
top: 50px;/*縱坐標：正值表示向下偏移，負值表示向上偏移*/
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">有生之年</div>
<div class="div2">狹路相逢</div>
</body>
</html>
效果：
相對定位不脫標
相對定位：不脫標，老家留坑， 別人不會把它的位置擠走 。
也就是說，相對定位的真實位置還在老家，只不過影子出去了，可以到處飄。
相對定位的用途
相對定位有坑，所以如果需要做一般不用于做“壓蓋”效果（把一個div放到另一個div之上）。頁面中，效果極小。就兩個作用：
（1）微調(diào)元素
（2）做絕對定位的參考，子絕父相
相對定位的定位值
left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移
PS：負數(shù)表示相反的方向。
↘：
position: relative;
left: 40px;
top: 10px;
↙：
position: relative;
right: 100px;
top: 100px;
↖：
position: relative;
right: 100px;
bottom: 100px;
↗：
position: relative;
left: 200px;
bottom: 200px;
如果要描述上面這張圖的方向，我們可以首先可以這樣描述：
position: relative;
left: 200px;
top: 100px;
因為 left: 200px 等價于 right: -200px ，所以這張圖其實有四種寫法。
絕對定位
絕對定位：定義橫縱坐標，原點在父容器的左上角或左下角。橫坐標用left表示，縱坐標用top或者bottom表示。
格式舉例如下：
position: absolute; /*絕對定位*/
left: 10px; /*橫坐標*/
top/bottom: 20px; /*縱坐標*/
絕對定位脫標
絕對定位的盒子脫離了標準文檔流。
所以，所有的標準文檔流的性質(zhì)，絕對定位之后都不遵守了。
絕對定位之后，標簽就不區(qū)分所謂的行內(nèi)元素、塊級元素了，不需要 display:block 就可以設置寬、高了。
絕對定位的參考點（重要）
（1）如果用 top描述 ，那么參考點就是 頁面的左上角 ，而不是瀏覽器的左上角：
（2）如果用 bottom描述 ，那么參考點就是 瀏覽器首屏窗口尺寸 （好好理解“首屏”二字），對應的頁面的左下角：
為了理解“ 首屏 ”二字的含義，我們來看一下動態(tài)圖：
問題：
答案：
用bottom的定位的時候，參考的是瀏覽器首屏大小對應的頁面左下角。
以盒子為參考點
一個絕對定位的元素，如果父輩元素中也出現(xiàn)了已定位（無論是絕對定位、相對定位，還是固定定位）的元素，那么將以父輩這個元素，為參考點。
如下：（子絕父相）
以下幾點需要注意。
（1） 要聽最近的已經(jīng)定位的祖先元素的，不一定是父親，可能是爺爺：
<div class="box1"> 相對定位
<div class="box2"> 沒有定位
<p></p> 絕對定位，將以box1為參考，因為box2沒有定位，box1就是最近的父輩元素
</div>
</div>
再比如：
<div class="box1"> 相對定位
<div class="box2"> 相對定位
<p></p> 絕對定位，將以box2為參考，因為box2是自己最近的父輩元素
</div>
</div>
（2）不一定是相對定位，任何定位，都可以作為兒子的參考點：
子絕父絕、 子絕父相 、子絕父固，都是可以給兒子定位的。但是在工程上，如果子絕、父絕，沒有一個盒子在標準流里面了，所以頁面就不穩(wěn)固，沒有任何實戰(zhàn)用途。
工程應用：
“ 子絕父相 ”有意義：這樣可以保證父親沒有脫標，兒子脫標在父親的范圍里面移動。于是，工程上經(jīng)常這樣做：
父親浮動，設置相對定位（零偏移），然后讓兒子絕對定位一定的距離。
（3）絕對定位的兒子，無視參考的那個盒子的padding：
下圖中，綠色部分是父親div的padding，藍色部分p是div的內(nèi)容區(qū)域。此時，如果div相對定位，p絕對定位，那么，
p將無視父親的padding，在border內(nèi)側(cè)為參考點，進行定位：
工程應用：
絕對定位非常適合用來做“壓蓋”效果。我們來舉個lagou.com上的例子。
現(xiàn)在有如下兩張圖片素材：
要求作出如下效果：
代碼實現(xiàn)如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
margin: 100px;
width: 308px;
height: 307px;
border: 1px solid #FF7E00;
position: relative; /*子絕父相*/
}
.box .image img{
width: 308px;
height: 196px;
}
.box .dtc{
display: block; /*轉(zhuǎn)為塊級元素，才能設置span的寬高*/
width: 52px;
height: 28px;
background-image: url(http://img.smyhvae.com/20180116_1115.png);
background-position: -108px 0px; /*這里用到了精靈圖*/
position: absolute; /*采用絕對定位的方式，將精靈圖蓋在最上層*/
top: -9px;
left: 13px;
}
.box h4{
background-color: black;
color: white;
width:308px;
height: 40px;
line-height: 40px;
position: absolute;
top: 156px;
}
</style>
</head>
<body>
<div class="box">
<span class="dtc"></span>
<div class="image">
<img src="http://img.smyhvae.com/20180116_1116.jpg" alt="">
</div>
<h4>廣東深圳寶安區(qū)建安一路海雅繽紛城4樓</h3>
</div>
</body>
</html>
代碼解釋如下：
為了顯示“多套餐”那個小圖，我們需要用到精靈圖。
“多套餐”下方黑色背景的文字都是通過“子絕父相”的方式的蓋在大海報image的上方的。
代碼的效果如下：
讓絕對定位中的盒子居中
我們知道，如果想讓一個 標準流中的盒子居中 （水平方向看），可以將其設置 margin: 0 auto 屬性。
可如果盒子是絕對定位的，此時已經(jīng)脫標了，如果還想讓其居中，可以這樣做：
<div>
width: 600px;
height: 60px;
position: absolute; 絕對定位的盒子
left: 50%; 首先，讓左邊線居中
top: 0;
margin-left: -300px; 然后，向左移動寬度（600px）的一半
</div>
如上方代碼所示，我們先讓這個寬度為600px的盒子，左邊線居中，然后向左移動寬度（600px）的一半，就達到效果了。
我們可以總結(jié)成一個公式：
left:50%; margin-left:負的寬度的一半
固定定位
固定定位：就是相對瀏覽器窗口進行定位。無論頁面如何滾動，這個盒子顯示的位置不變。
備注：IE6不兼容。
用途1：網(wǎng)頁右下角的“返回到頂部”
比如我們經(jīng)?？吹降木W(wǎng)頁右下角顯示的“返回到頂部”，就可以固定定位。
<style type="text/css">
.backtop{
position: fixed;
bottom: 100px;
right: 30px;
width: 60px;
height: 60px;
background-color: gray;
text-align: center;
line-height:30px;
color:white;
text-decoration: none; /*去掉超鏈接的下劃線*/
}
</style>
用途2：頂部導航條
我們經(jīng)常能看到固定在網(wǎng)頁頂端的導航條，可以用固定定位來做。
需要注意的是，假設頂部導航條的高度是60px，那么，為了防止其他的內(nèi)容被導航條覆蓋，我們要給body標簽設置60px的padding-top。
頂部導航條的實現(xiàn)如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
/*為什么要寫這個？*/
/*不希望我們的頁面被nav擋住*/
padding-top: 60px;
/*IE6不兼容固定定位，所以這個padding沒有什么用，就去掉就行了*/
_padding-top:0;
}
.nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
z-index: 99999999;
}
.inner_c{
width: 1000px;
height: 60px;
margin: 0 auto;
}
.inner_c ul{
list-style: none;
}
.inner_c ul li{
float: left;
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
}
.inner_c ul li a{
display: block;
width: 100px;
height: 60px;
color:white;
text-decoration: none;
}
.inner_c ul li a:hover{
background-color: gold;
}
p{
font-size: 30px;
}
.btn{
display: block;
width: 120px;
height: 30px;
background-color: orange;
position: relative;
top: 2px;
left: 1px;
}
</style>
</head>
<body>
<div class="nav">
<div class="inner_c">
<ul>
<li><a href="#">網(wǎng)頁欄目</a></li>
<li><a href="#">網(wǎng)頁欄目</a></li>
<li><a href="#">網(wǎng)頁欄目</a></li>
<li><a href="#">網(wǎng)頁欄目</a></li>
<li><a href="#">網(wǎng)頁欄目</a></li>
<li><a href="#">網(wǎng)頁欄目</a></li>
<li><a href="#">網(wǎng)頁欄目</a></li>
<li><a href="#">網(wǎng)頁欄目</a></li>
<li><a href="#">網(wǎng)頁欄目</a></li>
<li><a href="#">網(wǎng)頁欄目</a></li>
</ul>
</div>
</div>
</body>
</html>
5、z-index屬性：
z-index屬性：表示誰壓著誰。數(shù)值大的壓蓋住數(shù)值小的。
有如下特性：
（1）屬性值大的位于上層，屬性值小的位于下層。
（2）z-index值沒有單位，就是一個正整數(shù)。默認的z-index值是0。
（3）如果大家都沒有z-index值，或者z-index值一樣，那么在HTML代碼里寫在后面，誰就在上面能壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素。
（4）只有定位了的元素，才能有z-index值。也就是說，不管相對定位、絕對定位、固定定位，都可以使用z-index值。 而浮動的元素不能用 。
（5）從父現(xiàn)象：父親慫了，兒子再牛逼也沒用。意思是，如果父親1比父親2大，那么，即使兒子1比兒子2小，兒子1也能在最上層。
針對（1）（2）（3）條，舉例如下：
這是默認情況下的例子：（div2在上層，div1在下層）
現(xiàn)在加一個 z-index 屬性，要求效果如下：
第五條分析：
z-index屬性的應用還是很廣泛的。當好幾個已定位的標簽出現(xiàn)覆蓋的現(xiàn)象時，我們可以用這個z-index屬性決定，誰處于最上方。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了css布局之定位與浮動的相關資料,需要的朋友可以參考下2018-05-21
css絕對定位如何在不同分辨率下的電腦正常顯示定位位置？(一定要看！)
這篇文章主要介紹了css絕對定位如何在不同分辨率下的電腦正常顯示定位位置，本文首先解釋了常見的電腦分辨率，為了頁面在不同的分辨率下正常顯示，要給頁面一個安全寬度，2017-08-18
這篇文章主要介紹了CSS position屬性和實例應用演示,absolute（絕對定位）,relative（相對定位）,relative與absolute的結(jié)合使用以及fixed(固定定位),需要的朋友可以參考下2017-08-11html css 控制div或者table等固定在指定位置的實現(xiàn)方法
下面小編就為大家?guī)硪黄猦tml css 控制div或者table等固定在指定位置的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-06-13
這篇文章主要介紹了詳解CSS中position屬性介紹(新增sticky) 的相關資料，position的含義是指定位類型，取值類型可以有：static、relative、absolute、fixed、inherit和stic2018-12-17
這篇文章主要介紹了CSS Sticky Footer實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-05
CSS使用position:sticky 實現(xiàn)粘性布局的方法
這篇文章主要介紹了CSS使用position:sticky 實現(xiàn)粘性布局的方法的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-31
這篇文章主要介紹了CSS實現(xiàn)Sticky Footer的示例代碼的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-24
詳解CSS經(jīng)典布局之Sticky footer布局
這篇文章主要介紹了詳解CSS經(jīng)典布局之Sticky footer布局的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-08
這篇文章主要介紹了詳解Sticky Footer 絕對底部的兩種套路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-03
