css樣式布局之position屬性的用法案例

發(fā)布時間：2020-10-13 15:09:58 來源：億速云閱讀：166 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)css樣式布局之position屬性的用法案例的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

position屬性：用于定義建立元素布局所用的定位類型，該屬性有多個值：

值	描述
static	默認(rèn)值。沒有定位，元素出現(xiàn)在正常流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
relative	生成相對定位的標(biāo)簽，相對于標(biāo)簽原來位置進(jìn)行定位。因此，“l(fā)eft:20” 會向標(biāo)簽的left位置添加 20 像素。
absolute	生成相對定位的標(biāo)簽，相對于標(biāo)簽本身第一個position為非 static父元素進(jìn)行定位。標(biāo)簽的位置通過 “l(fā)eft”, “top”, “right” 以及 “bottom” 樣式屬性進(jìn)行規(guī)定。如果該標(biāo)簽所在的父標(biāo)簽均沒有設(shè)置position為非 static，則相對于瀏覽器窗口進(jìn)行定位，但是此時元素會隨著滾動調(diào)的滑動而滑動。
fixed	生成絕對定位的標(biāo)簽，相對于瀏覽器窗口進(jìn)行定位，此時元素不會隨著滾動調(diào)的滑動而滑動。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

（文檔流又稱正常流，是默認(rèn)情況下HTML元素排版布局過程中元素會自動按照自上而下或從左往右進(jìn)行流式排放的一種順序）

注意：任何元素都可以定位，但absolute或fixed元素會生成一個塊級框，不論該元素本身是不是塊級框。relative元素會相對于它在正常流中的默認(rèn)位置偏移。IE瀏覽器都不支持"inherit"屬性值。

當(dāng)一個標(biāo)簽使用了position CSS樣式屬性，如果其樣式屬性值為非static（不考慮inherit）則該標(biāo)簽將脫離正常文檔流，如果又沒有指定 “l(fā)eft”, “top”, “right” 以及 “bottom” 樣式屬性的屬性值，則該標(biāo)簽只待在原來位置，但已經(jīng)脫離正常文檔流

下為演示代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #z{
                width: 300px;
                height: 300px;
                border: 1px solid royalblue;
                position: relative;
            }
            #a,#b,#c{
                width: 100px;
                height: 100px;
            }
            #a{
                background: red;
                position: relative;
                right: 10px;
            }
            #b{
                background: green;
                position: fixed;
                left: 1000px;
                bottom: 20px;    /*只需要規(guī)定兩個方向就可以了，上下，左右各選其一*/        
            }
            #c{
                background: yellow;
                position: absolute;
                left: 10px;
                bottom: 3px;
            }
            
        </style>
    </head>
    <body>
        <div id="z">
            <div id="a"></div>
            <div id="b"></div>&nbsp;  
            //加空格用于復(fù)習(xí)div的塊級元素性質(zhì)
            <div id="c"></div>
            //加了空格后，c的div會自動換行  block的屬性所致
            </div>
    </body>
</html>

演示注釋：

position中：

relative 是相對于標(biāo)簽原來的位置點進(jìn)行定位的仍存在于文檔流中

fixed 是相對于整個瀏覽器來定位的直接無視瀏覽器里面的標(biāo)簽元素類似于“浮起來”了

absolute是相對于上一級[如. b對z]第一個（父）元素（要求為非static屬性）來定位的而且定位標(biāo)準(zhǔn)是依據(jù)父元素的外界邊框來確定的。

感謝各位的閱讀！關(guān)于css樣式布局之position屬性的用法案例就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

css樣式布局之position屬性的用法案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽