CSS屬性之定位屬性的示例分析

小編給大家分享一下CSS屬性之定位屬性的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

站在用戶的角度思考問題，與客戶深入溝通，找到莎車網(wǎng)站設(shè)計(jì)與莎車網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋莎車地區(qū)。

CSS的定位屬性有三種，分別是絕對(duì)定位、相對(duì)定位、固定定位。

position: absolute;  <!-- 絕對(duì)定位 -->
position: relative;  <!-- 相對(duì)定位 -->
position: fixed;     <!-- 固定定位 -->

下面逐一介紹。

相對(duì)定位

相對(duì)定位：讓元素相對(duì)于自己原來的位置，進(jìn)行位置調(diào)整（可用于盒子的位置微調(diào)）。

我們之前學(xué)習(xí)的背景屬性中，是通過如下格式：background-position:向右偏移量向下偏移量;

但這回的定位屬性，是通過如下格式：

position: relative;
    left: 50px;
    top: 50px;

相對(duì)定位的舉例：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus&reg;">
  <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;/*相對(duì)定位：相對(duì)于自己原來的位置*/
            left: 50px;/*橫坐標(biāo)：正值表示向右偏移，負(fù)值表示向左偏移*/
            top: 50px;/*縱坐標(biāo)：正值表示向下偏移，負(fù)值表示向上偏移*/

            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
 </head>
 <body>
    <div class="div1">有生之年</div>
    <div class="div2">狹路相逢</div>
 </body>
</html>

效果：

CSS屬性之定位屬性的示例分析

相對(duì)定位不脫標(biāo)

相對(duì)定位：不脫標(biāo)，老家留坑， 別人不會(huì)把它的位置擠走。

也就是說，相對(duì)定位的真實(shí)位置還在老家，只不過影子出去了，可以到處飄。

相對(duì)定位的用途

相對(duì)定位有坑，所以如果需要做一般不用于做“壓蓋”效果（把一個(gè)div放到另一個(gè)div之上）。頁面中，效果極小。就兩個(gè)作用：

（1）微調(diào)元素

（2）做絕對(duì)定位的參考，子絕父相

相對(duì)定位的定位值

left：盒子右移

right：盒子左移

top：盒子下移

bottom：盒子上移

PS：負(fù)數(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;

CSS屬性之定位屬性的示例分析

如果要描述上面這張圖的方向，我們可以首先可以這樣描述：

position: relative;
    left: 200px;
    top: 100px;

因?yàn)?left: 200px 等價(jià)于 right: -200px ，所以這張圖其實(shí)有四種寫法。

絕對(duì)定位

絕對(duì)定位：定義橫縱坐標(biāo)，原點(diǎn)在父容器的左上角或左下角。橫坐標(biāo)用left表示，縱坐標(biāo)用top或者bottom表示。

格式舉例如下：

position: absolute;  /*絕對(duì)定位*/
    left: 10px;  /*橫坐標(biāo)*/
    top/bottom: 20px;  /*縱坐標(biāo)*/

絕對(duì)定位脫標(biāo)

絕對(duì)定位的盒子脫離了標(biāo)準(zhǔn)文檔流。

所以，所有的標(biāo)準(zhǔn)文檔流的性質(zhì)，絕對(duì)定位之后都不遵守了。

絕對(duì)定位之后，標(biāo)簽就不區(qū)分所謂的行內(nèi)元素、塊級(jí)元素了，不需要 display:block 就可以設(shè)置寬、高了。

絕對(duì)定位的參考點(diǎn)（重要）

（1）如果用 top描述，那么參考點(diǎn)就是 頁面的左上角，而不是瀏覽器的左上角：

CSS屬性之定位屬性的示例分析

（2）如果用 bottom描述，那么參考點(diǎn)就是 瀏覽器首屏窗口尺寸（好好理解“首屏”二字），對(duì)應(yīng)的頁面的左下角：

CSS屬性之定位屬性的示例分析

為了理解“ 首屏”二字的含義，我們來看一下動(dòng)態(tài)圖：

CSS屬性之定位屬性的示例分析

問題：

CSS屬性之定位屬性的示例分析

答案：

用bottom的定位的時(shí)候，參考的是瀏覽器首屏大小對(duì)應(yīng)的頁面左下角。

CSS屬性之定位屬性的示例分析

以盒子為參考點(diǎn)

一個(gè)絕對(duì)定位的元素，如果父輩元素中也出現(xiàn)了已定位（無論是絕對(duì)定位、相對(duì)定位，還是固定定位）的元素，那么將以父輩這個(gè)元素，為參考點(diǎn)。

如下：（子絕父相）

CSS屬性之定位屬性的示例分析

以下幾點(diǎn)需要注意。

（1）要聽最近的已經(jīng)定位的祖先元素的，不一定是父親，可能是爺爺：

<div class="box1">        相對(duì)定位
            <div class="box2">    沒有定位
                <p></p>           絕對(duì)定位，將以box1為參考，因?yàn)閎ox2沒有定位，box1就是最近的父輩元素
            </div>
        </div>

再比如：

<div class="box1">        相對(duì)定位
            <div class="box2">    相對(duì)定位
                <p></p>           絕對(duì)定位，將以box2為參考，因?yàn)閎ox2是自己最近的父輩元素
            </div>
        </div>

（2）不一定是相對(duì)定位，任何定位，都可以作為兒子的參考點(diǎn)：

子絕父絕、 子絕父相、子絕父固，都是可以給兒子定位的。但是在工程上，如果子絕、父絕，沒有一個(gè)盒子在標(biāo)準(zhǔn)流里面了，所以頁面就不穩(wěn)固，沒有任何實(shí)戰(zhàn)用途。

工程應(yīng)用：

“ 子絕父相”有意義：這樣可以保證父親沒有脫標(biāo)，兒子脫標(biāo)在父親的范圍里面移動(dòng)。于是，工程上經(jīng)常這樣做：

父親浮動(dòng)，設(shè)置相對(duì)定位（零偏移），然后讓兒子絕對(duì)定位一定的距離。

（3）絕對(duì)定位的兒子，無視參考的那個(gè)盒子的padding：

下圖中，綠色部分是父親div的padding，藍(lán)色部分p是div的內(nèi)容區(qū)域。此時(shí)，如果div相對(duì)定位，p絕對(duì)定位，那么，

p將無視父親的padding，在border內(nèi)側(cè)為參考點(diǎn)，進(jìn)行定位：

CSS屬性之定位屬性的示例分析

工程應(yīng)用：

絕對(duì)定位非常適合用來做“壓蓋”效果。我們來舉個(gè)lagou.com上的例子。

現(xiàn)在有如下兩張圖片素材：

CSS屬性之定位屬性的示例分析

要求作出如下效果：

CSS屬性之定位屬性的示例分析

代碼實(shí)現(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)為塊級(jí)元素，才能設(shè)置span的寬高*/
            width: 52px;
            height: 28px;
            background-image: url(http://img.smyhvae.com/20180116_1115.png);
            background-position: -108px 0px; /*這里用到了精靈圖*/
            position: absolute;  /*采用絕對(duì)定位的方式，將精靈圖蓋在最上層*/
            top: -9px;
            left: 13px;
        }
        .box h5{
            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>
        <h5>廣東深圳寶安區(qū)建安一路海雅繽紛城4樓</h4>
    </div>
</body>
</html>

代碼解釋如下：

為了顯示“多套餐”那個(gè)小圖，我們需要用到精靈圖。

“多套餐”下方黑色背景的文字都是通過“子絕父相”的方式的蓋在大海報(bào)image的上方的。

代碼的效果如下：

CSS屬性之定位屬性的示例分析

讓絕對(duì)定位中的盒子居中

我們知道，如果想讓一個(gè) 標(biāo)準(zhǔn)流中的盒子居中（水平方向看），可以將其設(shè)置 margin: 0 auto 屬性。

可如果盒子是絕對(duì)定位的，此時(shí)已經(jīng)脫標(biāo)了，如果還想讓其居中，可以這樣做：

<div>
    width: 600px;
    height: 60px;
    position: absolute;  絕對(duì)定位的盒子
    left: 50%;           首先，讓左邊線居中
    top: 0;
    margin-left: -300px;  然后，向左移動(dòng)寬度（600px）的一半
</div>

如上方代碼所示，我們先讓這個(gè)寬度為600px的盒子，左邊線居中，然后向左移動(dòng)寬度（600px）的一半，就達(dá)到效果了。

CSS屬性之定位屬性的示例分析

我們可以總結(jié)成一個(gè)公式：

left:50%; margin-left:負(fù)的寬度的一半

固定定位

固定定位：就是相對(duì)瀏覽器窗口進(jìn)行定位。無論頁面如何滾動(dòng)，這個(gè)盒子顯示的位置不變。

備注：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：頂部導(dǎo)航條

我們經(jīng)常能看到固定在網(wǎng)頁頂端的導(dǎo)航條，可以用固定定位來做。

需要注意的是，假設(shè)頂部導(dǎo)航條的高度是60px，那么，為了防止其他的內(nèi)容被導(dǎo)航條覆蓋，我們要給body標(biāo)簽設(shè)置60px的padding-top。

頂部導(dǎo)航條的實(shí)現(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{
            /*為什么要寫這個(gè)？*/
            /*不希望我們的頁面被nav擋住*/
            padding-top: 60px;
            /*IE6不兼容固定定位，所以這個(gè)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值沒有單位，就是一個(gè)正整數(shù)。默認(rèn)的z-index值是0。

（3）如果大家都沒有z-index值，或者z-index值一樣，那么在HTML代碼里寫在后面，誰就在上面能壓住別人。定位了的元素，永遠(yuǎn)能夠壓住沒有定位的元素。

（4）只有定位了的元素，才能有z-index值。也就是說，不管相對(duì)定位、絕對(duì)定位、固定定位，都可以使用z-index值。 而浮動(dòng)的元素不能用。

（5）從父現(xiàn)象：父親慫了，兒子再牛逼也沒用。意思是，如果父親1比父親2大，那么，即使兒子1比兒子2小，兒子1也能在最上層。

針對(duì)（1）（2）（3）條，舉例如下：

這是默認(rèn)情況下的例子：（div2在上層，div1在下層）

CSS屬性之定位屬性的示例分析

現(xiàn)在加一個(gè) z-index 屬性，要求效果如下：

CSS屬性之定位屬性的示例分析

第五條分析：

CSS屬性之定位屬性的示例分析

z-index屬性的應(yīng)用還是很廣泛的。當(dāng)好幾個(gè)已定位的標(biāo)簽出現(xiàn)覆蓋的現(xiàn)象時(shí)，我們可以用這個(gè)z-index屬性決定，誰處于最上方。

以上是“CSS屬性之定位屬性的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：CSS屬性之定位屬性的示例分析
瀏覽地址：http://muchs.cn/article8/pdpjop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、企業(yè)建站、網(wǎng)站營銷、品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容