日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

創(chuàng)新互聯(lián)建站專注于北流網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供北流營銷型網(wǎng)站建設(shè)，北流網(wǎng)站制作、北流網(wǎng)頁設(shè)計、北流網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造北流網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供北流網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

1. 靜態(tài)定位：static

static 是 position 屬性的默認值，表示沒有定位，使用靜態(tài)定位的元素會按照元素正常的位置顯示，并且不會受到 top、bottom、left、right 和 z-index 屬性的影響。示例代碼如下：

    


    

        
postiont: static;
    

運行結(jié)果如下圖所示：

2. 相對定位：relative

相對定位就是元素相對于自己默認的位置來進行位置上的調(diào)整，您可以通過 top、bottom、left 和 right 四個屬性的組合來設(shè)置元素相對于默認位置在不同方向上的偏移量。

【示例】下面通過代碼來演示相對定位的使用：

    


    

        
position: relative;
        

    

運行結(jié)果如下圖所示：

注意：相對定位的元素可以移動并與其他元素重疊，但會保留元素默認位置處的空間。

3. 絕對定位：absolute

絕對定位就是元素相對于第一個非靜態(tài)定位（static）的父級元素進行定位，如果找不到符合條件的父級元素則會相對與瀏覽器窗口來進行定位。您同樣可以使用 top、bottom、left 和 right 四個屬性來設(shè)置元素相對于父元素或瀏覽器窗口不同方向上的偏移量。

使用絕對定位的元素會脫離原來的位置，不再占用網(wǎng)頁上的空間。與相對定位相同，使用絕對定位的元素同樣會與頁面中的其它元素發(fā)聲重疊，另外使用絕對定位的元素可以有外邊距，并且外邊距不會與其它元素的外邊距發(fā)生重疊。

【示例】下面通過示例來演示絕對定位的使用：

    


    

        
position: absolute;
        
<p>
    

運行結(jié)果如下圖所示：

4. 固定定位：fixed

固定定位就是將元素相對于瀏覽器窗口進行定位，使用固定定位的元素不會因為瀏覽器窗口的滾動而移動，就像是固定在了頁面上一樣，我們經(jīng)常在網(wǎng)頁上看到的返回頂部按鈕就是使用固定定位實現(xiàn)的。

【示例】下面通過示例來演示固定定位的使用：

    


    

        
position: fixed;
    

運行結(jié)果如下圖所示：

5. 粘性定位：sticky

粘性定位與前面介紹的四種定位方式不太一下，它像是相對定位和固定定位的結(jié)合體，當滾動頁面時它的效果與相對定位相同，當元素滾動到一定程度時它又會呈現(xiàn)出固定定位的效果。比如一些網(wǎng)頁上的導航菜單，當頁面加載完成時它在自己默認的位置，當我們向下滾動頁面時它又會固定在頁面的最頂端。

【示例】下面通過示例來演示粘性定位的使用：

    


    

        
1
        
2
        
position: sticky;
        
4
        
5
        
6
        
7
    

運行結(jié)果如下圖所示：

在使用粘性定位時，需要注意以下幾點：

• 在設(shè)置 position:sticky; 時，必須再定義 top、bottom、right、left 四個屬性之一，否則只會處于相對定位；
• 使用固定定位元素的父元素不能定義 overflow:hidden 或者 overflow:auto 屬性；
• 父元素的高度不能低于固定定位元素的高度；
• 固定定位的元素僅在其父元素內(nèi)有效。