bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

CSS中position屬性的用法、分類以及使用效果

今天小編給大家分享的是CSS中position屬性的用法、分類以及使用效果，很多人都不太了解，今天小編為了讓大家更加了解CSS中position屬性，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會有所收獲的哦。

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站建設(shè)、網(wǎng)站設(shè)計與策劃設(shè)計,金水網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:金水等地區(qū)。金水做網(wǎng)站價格咨詢:028-86922220

CSS中position屬性的用法、分類以及使用效果

詳解CSS中position屬性的用法

一、position屬性有什么作用？

CSS position屬性用于指定一個元素在文檔中的定位方式。top，right，bottom 和 left屬性則決定了該元素的最終位置。（MDN定義）。

二、position有哪些分類？

1、static

正常的布局行為，元素在文檔常規(guī)流中當(dāng)前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效。

位置不變。

2、relative

該關(guān)鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調(diào)整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素?zé)o效。

相對于自身位置的偏移。

3、absolute

不為元素預(yù)留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設(shè)置外邊距（margins），且不會與其他邊距合并。

就像從來沒有這個元素一樣，會根據(jù)此元素的非static祖先元素確定元素的偏移。

4、fixed

不為元素預(yù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現(xiàn)在的每頁的固定位置。fixed 屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform  屬性非 none 時，容器由視口改為該祖先。

低版本ie不兼容。

5、sticky

盒位置根據(jù)正常流計算(這稱為正常流動中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table 時），該元素定位均不對后續(xù)元素造成影響。當(dāng)元素 B 被粘性定位時，后續(xù)元素的位置仍按照 B 未定位時的位置來確定。position: sticky 對 table 元素的效果與 position: relative 相同。

同時sticky還有以下問題：

1、sticky 不會觸發(fā) BFC。

2、樣式表 z－index 無效。行內(nèi) style 寫有效。

3、sticky 是容器相關(guān)的，也就說 sticky 的特性只會在他所處的容器里生效。強(qiáng)調(diào)這一點(diǎn)是因為在實際使用中，碰到 body 設(shè)置 height：100% 的時候 sticky 元素停在某一個位置不動了。

三、測試代碼

測試代碼的公共代碼如下:

<html html>
<head>
    <meta charset="utf-8">
    <title>position</title>
</head>
<style>
    .main-app{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .app-container {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #the-box{
        position: static;
        /* position: relative;
        top:100px;
        left:200px; */
    }
    .sub-box {
        width: 50px;
        height: 50px;
    }
</style>
 
<body>
    <div class="main-app">
        <div class="app-container">
            <div class="sub-box" style="background: gray;"></div>
            <div id="the-box" class="sub-box" style="background: green;"></div>
            <div class="sub-box" style="background: yellow;"></div>
            <div class="sub-box" style="background: red;"></div>
        </div>
    </div>
</body>
 
</html>

我選定第二個元素作為我們本次的測試對象，測試環(huán)境為chrome 75版本。

1、static

#the-box{
    position: static;
}

結(jié)果：

正常文檔流顯示

CSS中position屬性的用法、分類以及使用效果

2、relative

#the-box{
    position: relative;
    top:100px;
    left:200px;
}

結(jié)果：

CSS中position屬性的用法、分類以及使用效果

相對于自身原來的位置偏移設(shè)定的位置，但是原來的位置被保留下來。

3、absolute

#the-box{
    position: absolute;
    top: 100px; 
    left: 200px;
}

結(jié)果：

CSS中position屬性的用法、分類以及使用效果

原來固定的位置被別的元素占用，由于父元素是非static（flex），所以當(dāng)前元素相對于父元素偏移設(shè)定的位置。

4、sticky

須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

此特性是元素固定在視口的位置，如果頁面沒有滾動軸，將無法展示特性，此時，我們對它的父元素稍加更改，使頁面出現(xiàn)滾動軸。

.app-container {
    width: 100%;
    height: 3000px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#the-box{
    position: sticky;
    top: 100px;
}

結(jié)果：

CSS中position屬性的用法、分類以及使用效果

當(dāng)我們滾動頁面當(dāng)元素距離頂部超過100px時，向下滾動時當(dāng)前元素位置相對于視口不變，此特性可以用作table固定表頭。

5、fixed

對于ie7以下版本不能使用，其實就相當(dāng)于固定元素在瀏覽器窗口的位置。

#the-box{
    position: fixed;
    top: 100px;
    left: 200px;
}

結(jié)果：

CSS中position屬性的用法、分類以及使用效果

無論如何滾動滾動軸，元素位置始終不變。

6、inherit

規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

7、initial

initial 關(guān)鍵字用于設(shè)置 CSS 屬性為它的默認(rèn)值，可作用于任何 CSS 樣式。（IE 不支持該關(guān)鍵字）

8、unset

名如其意，unset 關(guān)鍵字我們可以簡單理解為不設(shè)置。其實，它是關(guān)鍵字 initial 和 inherit 的組合。

當(dāng)我們給一個 CSS 屬性設(shè)置了 unset：

如果該屬性是默認(rèn)繼承屬性，該值等同于 inherit

如果該屬性是非繼承屬性，該值等同于 initial

9、revert

暫時未列入規(guī)范。

以上就是CSS中position屬性的用法、分類以及使用效果的簡略介紹，當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過才領(lǐng)會。如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦！

網(wǎng)頁名稱：CSS中position屬性的用法、分類以及使用效果
網(wǎng)頁路徑：http://vcdvsql.cn/article8/jhidop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、Google、網(wǎng)站維護(hù)、標(biāo)簽優(yōu)化、網(wǎng)站策劃、動態(tài)網(wǎng)站

廣告

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

外貿(mào)網(wǎng)站建設(shè)