談談對css定位的理解

　　網上將css定位的有很多，但是大多都沒有講明白或者深入。這里，我將說說我的理解。

　　一、定位的專業解釋(來自百度百科)

　　在CSS中關於定位的內容是：position:relative | absolute | static | fixed

　　　● static 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。

　　　● relative 不脫離文檔流，參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。

　　　● absolute 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近的父級定位元素，當父級 position 為 static 時，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。

　　　● fixed 固定定位，這里他所固定的對像是可視窗口而並非是body或是父級元素。可通過z-index進行層次分級。

　　CSS中定位的層疊分級：z-index: auto | namber;

　　　● auto 遵從其父對象的定位

　　　● namber 無單位的整數值。可為負數

　　【注】什么是文檔流：

　　文檔流是文檔中可顯示對象在排列時所占用的位置。比如網頁的div標簽它默認占用的寬度位置是一整行，p標簽默認占用寬度也是一整行，因為div標簽和p標簽是塊狀對象。

 

　　二、我的理解（文字不理解的，看代碼）

　　◆ static：以父級標簽（用position限定）左上角為原點，根據top,left,right,bottom定死了，如果父級沒有position限定，top、left等限定將不被瀏覽器解析（即無效）；並且在設計頁面不能拖動。 

　　◆ relative：設計的時候以文本流（即實際可用空間，只有static和relative會占有文本流）左上角為原點，可以拖動（不影響和父級標簽的相對關系），頁面縮放時跟隨父級標簽縮放（相對位置不變），由於文本流的關系，與父級標簽存在間接的相對關系。

　　◆ absolute：若父級標簽用position的absolute和relative限定，設計的時候以父級標簽左上角為原點；其它的（無position限定或者父級用static或者fixed限定的）則相對於body為標准；可以拖動；
        頁面縮放時只在父級為positon中的absolute和relative限定的時候跟隨父級標簽（若沒有，則以body為標准）縮放。

　　◆ fixed：相對於瀏覽器的可視窗口固定，在調整窗口的大小時，位置變化只與窗口有關。

 下面為表格說明：

	父級標簽無position限定	父級標簽用static限定	父級標簽用fixed限定	父級標簽用absolute限定	父級標簽用relative限定
fixed	相對可視窗口	相對可視窗口	相對可視窗口	相對可視窗口	相對可視窗口
absolute	相對body	相對body	相對body	相對父級	相對父級
relative	相對文本流定位（與父級有間接關系）
static	相對父級定位 top等限定無效	相對父級定位 top等限定有效	相對父級定位 top等限定有效	相對父級定位 top等限定有效	相對父級定位 top等限定有效

 

　　

 

 

 

 

文字永遠是枯燥的，本來想畫圖說明的，但是覺得麻煩，代碼能夠更好的說明，請看詳細測試代碼：

css代碼（position.css）：

body 
{
    margin:0;
}
#top
{
    margin: auto;
    width: 850px;
    height: 180px;
    background-color: #99CCFF;
}
.layer_banner
{
    border: 10px solid #808000;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: 100px;
    background-color: #99CCFF;
    position: relative;
    top: -1px;
    left: 45px;
}
.layer_banner_ab
{
    border: 10px solid #808000;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: 100px;
    background-color: #99CCFF;
    position:absolute;
    top: 391px;
    left: 100px;
}
.layer_banner_st
{
    border: 10px solid #808000;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: 100px;
    background-color: #99CCFF;
    position:static;
    top: 197px;
    left: 84px;
}
.layer_banner_fi
{
    border: 10px solid #808000;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: 100px;
    background-color: #99CCFF;
    position:fixed;
    top: 560px;
    left: 82px;
}
.layer_re
{
    position:relative;
    margin:10px;
    padding:10px;
    top: -75px;
    left: 246px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_ab
{
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 31px;
    left: 405px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 155px;
}
.layer_fi
{
    position:fixed;
    margin:10px;
    padding:10px;
    top: 60px;
    left: 603px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_st
{
    position:static;
    margin: 10px;
    padding: 10px;
    top: 7px;
    left: 199px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 451px;
}
.layer_re1
{
    position:relative;
    margin:10px;
    padding:10px;
    top: -84px;
    left: 482px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_ab1
{
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 19px;
    left: 147px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 413px;
}
.layer_fi1
{
    position:fixed;
    margin:10px;
    padding:10px;
    top: 445px;
    left: 450px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_st1
{
    position:static;
    margin: 10px;
    padding: 10px;
    top: 7px;
    left: 199px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 451px;
}
.layer_re2
{
    position:relative;
    margin:10px;
    padding:10px;
    top: -75px;
    left: 246px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_ab2
{
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 223px;
    left: 212px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    }
.layer_fi2
{
    position:fixed;
    margin:10px;
    padding:10px;
    top: 219px;
    left: 536px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_st2
{
    position:static;
    margin: 10px;
    padding: 10px;
    top: 7px;
    left: 199px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 451px;
}
.layer_re3
{
    position:relative;
    margin:10px;
    padding:10px;
    top: -93px;
    left: 189px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_ab3
{
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 300px;
    left: 312px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 481px;
}
.layer_fi3
{
    position:fixed;
    margin:10px;
    padding:10px;
    top: 605px;
    left: 648px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_st3
{
    position:static;
    margin: 10px;
    padding: 10px;
    top: 7px;
    left: 199px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 451px;
}
#content
{
    margin: auto;
    width: 850px;
    height: 800px;
    background-color: #CCFFCC;
}
#bottom
{
    margin: auto;
    width: 850px;
    height: 130px;
    background-color: #F0F0F0;
}

html頁面代碼：

<!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">
<head runat="server">
    <title></title>
    <link href="position.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="top">
        這里測試position的relative和absolute的區別
        <div class="layer_banner">
        This sentence is used to test.
        <div class="layer_st">static</div>
        <div class="layer_re">relative</div>
        <div class="layer_ab">absolute</div>
        <div class="layer_fi">fixed</div>
        </div>
    </div>
    <div id="content">
        <div class="layer_banner_ab">
        This sentence is used to test.
        <div class="layer_st1">static</div>
        <div class="layer_fi1">fixed</div>
        <div class="layer_re1">relative</div>
        <div class="layer_ab1">absolute</div>
        </div>
        <div class="layer_banner_st">
        This sentence is used to test.
        <div class="layer_st2">static</div>
        <div class="layer_fi2">fixed</div>
        <div class="layer_re2">relative</div>
        <div class="layer_ab2">absolute</div>
        </div>
        <div class="layer_banner_fi">
        This sentence is used to test.
        <div class="layer_st3">static</div>
        <div class="layer_fi3">fixed</div>
        <div class="layer_re3">relative</div>
        <div class="layer_ab3">absolute</div>
        </div>
    </div>
    <div id="bottom"></div>
</body>
</html>

結果：

縮放之后：