Html之position粘性定位

幾天剛開始寫一個Vue項目，遇到了一個定位問題，覺得挺有意思的，這里分享給大家。

其實就是一個首頁頂部固定的問題，一提到頂部固定，相信大家都第一反應是想到了

position:fixed;

下面來看一下這個頁面

這個頁面看起來挺正常的，其實是下面內容區添加了margin-top:60px樣式，如果把margin-top去掉就會變成下圖這樣

發現上面的Welcome to Your Vue.js App字樣被頂部導航欄遮蓋，這里大家可能會說，覆蓋后下面內容設置一個margin-top不就行了，其實前面我就設置過margin-top為60px，這個60px實際上是頂部導航欄的高度；

導航欄高度基本上都是固定的，有時候除了導航欄需要固定，也會碰到一下其他的高度不固定的元素需要固定，如果margin-top單純設置一個固高當然不行；

有人會說這個高度可以根據需要固定元素的高度動態設置，其實這是一種辦法，通過js動態獲取頂部導航欄的高度，然后給下面內容區margin-top賦值；

今天我想說的是另一種方法，就是position定位屬性sticky粘性定位，大家聽到這個可能并不陌生，sticky是CSS3提供的一個新屬性，相當于是相對定位relative和固定定位fixed的結合體

它主要用在對scroll事件的監聽上，簡單說在滑動過程中，某個元素的距離其父元素的距離達到 sticky 粘性定位要求時；position:sticky 這時的效果就相對于 fixed 定位，固定到適當的位置。

但是sticky也需要滿足一些條件才能生效

使用條件：

1. 父元素不能設置 overflow:hidden; 或者 overflow:auto; 屬性；

2. 必須制定 top、bottom 、left 、 right 4個值之一，否則只會處于相對定位；

3. 元素的高度不能低于sticky 元素的高度；

4. sticky 元素僅在其父元素內生效

SS中通常使用position 屬性，決定元素的定位方式。

常用的定位方式通常有

值	意義
relative	相對定位
absolute	絕對定位
fixed	固定定位

相對定位

position 設置為 relative。

相對定位是元素相對于自己原來的位置通過使用top、left 等屬性進行移動，使其顯示在新的位置上。

相對定位的元素雖然移動了，但是之前的位置并沒有放棄，同時也不會搶占移動后原有元素的位置(但會對原有位置的元素進行壓蓋)。

相對定位通常用來微調元素位置；而且相對定位可以作為下面要講的絕對定位的參考坐標。

屬性	值	作用
top	像素、百分比等	相對原來位置，距離上邊移動距離，可以為負值
left	像素、百分比等	相對原來位置，距離左邊移動距離，可以為負值
right	像素、百分比等	相對原來位置，距離右移動距離，可以為負值
bottom	像素、百分比等	相對原來位置，距離下邊移動距離，可以為負值。

相對定位舉例

像素描述位置

box2 開啟了相對定位，在新的位置得到了渲染。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>相對定位概念</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      p {
        width: 100px;
        height: 100px;
        background-color: orange;
        border: 1px solid #000;
      }


      .box2 {
        position: relative;
        top: 102px;
        left: 102px;
      }
</style>
  </head>
  <body>
    <p></p>
    <p class="box2"></p>
    <p></p>
  </body>
</html>

百分比形式

如果在相對定位中， top、left、bottom、right 寫成百分比的形式，表示他們在父容器內所顯示的百分比位置。

舉例

父元素寬高均200px。開啟子元素相對定位，則子元素位置如下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>相對定位概念</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 40px auto;
      }


      p {
        position: relative;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: orange;
      }
</style>
  </head>
  <body>
    <div>
      <p></p>
    </div>
  </body>
</html>

絕對定位

position 設置為 absolute。

絕對定位的元素在瀏覽器中擁有絕對位置，可以通過坐標進行描述。

絕對定位的元素脫離標準文檔流，釋放了自己本來應該在的地方的位置；同時會在新的位置上對其他元素進行壓蓋。

絕對定位的元素會在自己祖先元素中尋找擁有定位屬性的元素作為參考點。這個祖先元素通常是相對定位的。

絕對定位的元素如果找不到擁有定位屬性的祖先元素作為參考點，則相對于 IBC（初始包含塊，可以認為是HTML根元素）定位。

屬性	值	作用
top	像素、百分比等	相對參考點位置，距離參考點上邊移動距離，可以為負值
left	像素、百分比等	相對參考點位置，距離參考點左邊移動距離，可以為負值
right	像素、百分比等	相對參考點位置，距離參考點右邊移動距離，可以為負值
bottom	像素、百分比等	相對參考點位置，距離參考點下邊移動舉例，可以為負值。

舉例

參考點IBC

參考點是IBC,此時的top、left、bottom、right都是通過HTML跟節點來描述元素的位置。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>絕對定位釋放自己位置的示例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
      }
      .box1 {
        background-color: orange;
      }
      .box2 {
        background-color: green;
        position: absolute;
        top: 230px;
        left: 200px;
      }
      .box3 {
        background-color: blue;
      }
</style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <ul>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
    </ul>
  </body>
</html>

參考點是定位元素

最經典的就是，父節點開啟相對定位，子元素開啟絕對定位；此時的top、left、bottom、right都是通過父元素的位置描述子元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子絕父相</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 402px;
        height: 402x;
        border: 1px solid #000;
        padding: 100px;
        margin: 0 auto;
        position: relative;
      }


      .box2 {
        width: 200px;
        height: 200px;
        padding: 50px;
        border: 1px solid #000;
        position: relative;
      }


      .box3 {
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: orange;
      }
</style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
        <div class="box3">dual</div>
      </div>
    </div>
  </body>
</html>

固定定位

position 設置為 fixed。

不管頁面如何下拉，元素永遠固定在一個位置。

固定定位只以頁面為參考點，并且同樣也脫離了標準的文檔流。

固定定位用途：

用于頁面內容比較長，返回頂部功能等。
用于制作CSS精靈 (現在很少用了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位demo</title>
    <style>
        .box {
            position: fixed;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
        }


        body {
            height: 100000px;
        }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

層疊屬性

對于上述說的定位元素，他們都有可能壓蓋到渲染后的位置上的原有元素。某些場景下我們不希望此事發生。

此時就用到了 z-index屬性。它的值是一個正整數，值越大會越在上面顯示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index屬性演示</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: orange;
            position: absolute;
            top:100px;
            left: 100px;
            z-index: 2;
        }


        .box2 {
            width: 300px;
            height: 300px;
            background-color: green;
            position: absolute;
            z-index: 10;
        }
</style>
</head>
<body>


    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

總結

相對定位：相對于自己原來的位置進行定位。

絕對定位：選一個參考點進行定位。參考點可以是擁有定位屬性的祖先元素，如果找不到，則為IBC。

固定定位：在頁面（可視化的屏幕）的固定位置，不隨著頁面滾動而滾動。

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

有些時候

為了看到光明

你必須冒險闖入黑暗之中

- 2024.03.29 -

CSS定位屬性是用于控制網頁中元素位置的一種方式，它能夠讓元素在頁面上精準地落在我們想要的位置。

在CSS中，定位（Positioning）是控制元素在頁面上如何定位和顯示的一種機制。它主要包括四種屬性：靜態定位（static）、相對定位（relative）、絕對定位（absolute）、固定定位（fixed）。

每種定位方式都有其獨特的特點和使用場景，下面將分別介紹這幾種定位屬性。

一、Static（靜態定位）

靜態定位是元素的默認定位方式，元素按照正常的文檔流進行排列。在靜態定位狀態下，不能配合top、bottom、left、right來改變元素的位置。

可以用于取消元素之前的定位設置。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<style>
.static {
background-color: lightblue;
padding: 100px;
}
</style>
</head>
<body>

<div>這是一個靜態定位的元素。</div>

</body>
</html>

二、Fixed（固定定位）

固定定位使元素相對于瀏覽器窗口進行定位，即使頁面滾動，元素也會保持在固定的位置。

固定定位的元素會脫離正常的文檔流。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
/* 給整個頁面設置高度，出滾動條以便觀察 */
height: 5000px;
}
div{
width: 100px;
height: 100px;
background-color: blue;
/* 固定定位 */
position: fixed;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

運行結果：

移動前

移動后

比如我們經常看到的網頁右下角顯示的“返回到頂部”，就可以用固定定位來實現。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
position: relative;
}
.content {
/* 頁面內容樣式 */
}
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body style="height: 5000px;">
<div>
</div>
<button id="backToTop" onclick="scrollToTop()">返回頂部</button>
<script>
function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>
</body>
</html>

運行結果：

三、Relative（相對定位）

相對定位是將元素對于它在標準流中的位置進行定位，通過設置邊移屬性top、bottom、left、right，使指定元素相對于其正常位置進行偏移。如果沒有定位偏移量，對元素本身沒有任何影響。

不使元素脫離文檔流，空間會保留，不影響其他布局。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:relative;/*相對定位*/
left:100px;/*向右偏移100px*/
top:-50px;/*向上偏移50px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>

運行結果：

沒使用相對定位之前是這樣的：

使用相對定位后：相對于原來的位置向右偏移了100px，向上偏移50px。

雖然它的位置發生了變化，但它在標準文檔流中的原位置依然保留。

四、Absolute（絕對定位）

絕對定位使元素相對于最近的非 static 定位祖先元素進行定位。如果沒有這樣的元素，則相對于初始包含塊（initial containing block）。絕對定位的元素會脫離正常的文檔流。

如果該元素為內聯元素，則會變成塊級元素，可直接設置其寬和高的值（讓內聯具備快特性）；
如果該元素為塊級元素，使其寬度根據內容決定。（讓塊具備內聯的特性）

<style>
.wrap{
width:500px;
height:400px;
border: 2px solid red;
}
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:absolute;/*絕對定位*/
left:100px;/*向右偏移100px*/
top:30px;/*向下偏移30px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;

}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

將第二個設置為絕對定位后，它脫離了文檔流可以定位到頁面的任何地方，在標準文檔流中的原有位置會空出來，所以第三個會排到第一個下面。

第二個相對于它的父元素向右偏移100，向下偏移30。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

五、z-index（層級順序的改變）

層疊順序決定了元素之間的堆疊順序。z-index 屬性用于設置元素的層疊順序。具有較高 z-index 值的元素會覆蓋具有較低 z-index 值的元素。

注意：

默認值是0
數值越大層越靠上
不帶單位
沒有最大值和最小值
可以給負數

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:nth-of-type(1){
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
}
div:nth-of-type(2){
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
div:nth-of-type(3){
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>

</body>
</html>

運行結果：

可以看到，最后一個div依然存在，但是看不見了，原因就是我們改變了z-index屬性值。

以上就是CSS定位屬性的介紹了，通過這些定位屬性，可以靈活地控制網頁中元素的位置和堆疊順序。

在實際應用中，CSS定位屬性的使用需要考慮到整體布局和用戶體驗。合理運用這些定位技巧，可以讓你的網頁不僅美觀，而且易于使用和維護。記住，好的設計總是細節和功能的完美結合。

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

在線咨詢

上一篇：JavaScript for 循環
下一篇：為HTML頁面添加視頻、音頻的方法-零基礎自學網頁制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Html之position粘性定位

使用條件：

相對定位

相對定位舉例

絕對定位

舉例

固定定位

層疊屬性

總結

一、Static（靜態定位）

二、Fixed（固定定位）

三、Relative（相對定位）

四、Absolute（絕對定位）

五、z-index（層級順序的改變）

您的項目需求