CSS position屬性和實例應用演示

2024-07-11 08:58:31

字體：大中小

來源：轉載

供稿：網友

目前幾乎所有主流的瀏覽器都支持position屬性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE瀏覽器，IE9、IE10還沒測試過），以下是w3school對position五個值的解釋：

其中absolute和relative是最常用的，fixed用得也比較多（其中IE6并不支持fixed）。

1、absolute（絕對定位）

absolute是生成覺對定位的元素，脫離了文本流（即在文檔中已經不占據位置），參照瀏覽器的左上角通過top,right,bottom,left（簡稱TRBL）定位。可以選取具有定位的父級對象（下文將說到relative與absolute的結合使用）或者body坐標原點進行定位，也可以通過z-index進行層次分級。absolute在沒有設定TRBL值時是根據父級對象的坐標作為始點的，當設定TRBL值后則根據瀏覽器的左上角作為原始點。具體案例如下：

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>position:absolute定位</title><style type="text/css">    html,body,div{                    margin:0;                       padding:0;                      list-style:none;    }    .center{                margin:30px;                border:#999999 solid 10px;                width:400px;                height:300px;    }    .div1{            width:200px;            height:200px;            background:#0099FF;            /*設定TRBL*/            position:absolute;            left:0px;            top:0px;    }    .div2{            width:400px;            height:300px;            font-size:30px;            font-weight:bold;            color:#fff;            background:#FF0000;    }</style></head><body>    <div class="center">        <div class="div1"></div>        <div class="div2">position:absolute定位測試</div>    </div></body></html>

這段代碼產生的效果如下：

這是設定TRBL之后的效果(設置TRBL以瀏覽器左上角為原點)，當沒有設置TRBL時（沒有設置TRBL是以父級對象的坐標為原點），即將div1改成如下代碼時

.div1{            width:200px;            height:200px;            background:#0099FF;            /*沒有設定TRBL*/            position:absolute;    }

則效果如下：

2、relative（相對定位）

relative是相對的意思，顧名思義就是相對于元素本身在文檔中應該出現的位置來移動這個元素，可以通過TRBL來移動元素的位置，實際上該元素依然占據文檔中原有的位置，只是視覺上相對原來的位置有移動。具體案例如下：

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>position:relative定位</title><style type="text/css">    html,body,div{                    margin:0;                       padding:0;                      list-style:none;    }    .center{                margin:30px;                border:#999999 solid 10px;                width:400px;                height:300px;                background:#FFFF00;    }    .div1{            width:200px;            height:150px;            background:#0099FF;            position:relative;            top:-20px;            left:0px;    }    .div2{            width:400px;            height:150px;            font-size:30px;            font-weight:bold;            color:#fff;            background:#FF0000;    }</style></head><body>    <div class="center">        <div class="div1"></div>        <div class="div2">position:relative定位測試</div>    </div></body></html>

代碼產生的效果如下：

3、relative與absolute的結合使用

在網頁設計時經常會用到浮動來對頁面進行布局，但是浮動所帶來的不確定因素卻很多（例如：IE瀏覽器的兼容問題）。相對來說，在有些布局中定位使用會更加簡單、快捷、兼容性更好（relative與absolute相結合來使用），下面通過網頁中的一個實例（網頁中的head部分）進行說明，具體代碼如下：

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">html,body,div,ul,li,a{                    margin:0;                       padding:0;                      list-style:none;}a, a:hover{ color:#000; border:0; text-decoration:none;}    #warp,#head,#main,#foot{    width: 962px;}/*設置居中*/#warp{    margin: 0 auto;}#head{            height:132px;            position:relative;}.logo{        position:absolute;        top:17px;}.head_pic{            position:absolute;            top:17px;            left:420px;}.sc{            position:absolute;            right:5px;            top:12px;}.sc a{            padding-left:20px;            color:#666;}.nav{        width:960px;        height:42px;        line-height:42px;        position:absolute;        bottom:0px;        background:url(img/nav_bj.jpg) no-repeat center;}.nav ul{            float:left;            padding:0 10px;}.nav li{            float:left;            background:url(img/li_bj.jpg) no-repeat right center;            padding-right:40px;            padding-left:20px;            text-align:center;            display:inline;}.nav li a{                font-size:14px;                font-family:Microsoft YaHei !important;                white-space:nowrap;}.nav li a:hover{                    color:#FBECB7;}</style><title></title></head><body>    <div id="warp">        <div id="head">            <div class="logo"><img src="img/logo.jpg" /></div>            <div class="head_pic"><img src="img/head_pic.jpg" /></div>            <div class="sc">                <a href=""><img src="img/sc_btn.jpg" /></a>                <a href=""><img src="img/sy_btn.jpg" /></a>                <a href=""><img src="img/kf_btn.jpg" /></a>            </div>            <div class="nav">                <ul>                    <li><a href="">首頁</a></li>                    <li><a href="">關于我們</a></li>                    <li><a href="">團隊文化</a></li>                    <li><a href="">公司動態</a></li>                    <li><a href="">資訊參考</a></li>                    <li><a href="">業務中心</a></li>                    <li><a href="">合作銀行</a></li>                    <li><a href="">聯系我們</a></li>                </ul>            </div>        </div>        <div id="main"></div>        <div id="foot"></div>    </div></body></html>

效果如下圖：