如何使用 JavaScript 設定元素的定位方法型別？

Javascript 面向物件程式設計前端技術

在本教程中，我們將學習如何使用 JavaScript 設定元素的定位方法型別。

定位允許我們將元素從實際文件順序中移出，並以各種方式顯示它們。例如，保持在彼此之上或佔據瀏覽器視口中的初始位置。

讓我們瞭解如何設定定位方法的型別。

使用 Style position 屬性

使用 Style 的 "position" 屬性，我們可以設定或返回用於元素的定位方法型別。

可用的 position 值為 **relative、absolute、fixed、sticky** 和 **static。**

**static 定位** 是 JavaScript 中可用的預設 position 值。具有 static 位置的元素遵循文件順序。

**relative 定位** 將元素相對於其正常位置進行設定。其他內容不會填充具有 relative 位置的元素建立的任何空間。

**fixed 定位** 將元素位置相對於視口進行設定。即使我們滾動頁面，它也始終保持在初始位置。固定元素不會像相對元素那樣在頁面上留下空間。

**absolute 定位** 將元素相對於最近的祖先元素進行設定。如果具有 absolute 位置的元素沒有祖先，它將查詢文件主體並遵循頁面滾動。具有 absolute 位置的元素沒有正常的文件流，它們與其他元素重疊。

粘性元素根據滾動位置的行為類似於相對固定的元素。它保持相對狀態，直到我們在視口中設定偏移位置。然後它像固定元素一樣“粘住”。

Internet Explorer 不支援粘性定位方法。Safari 需要 -WebKit-position。

我們必須指定元素的 **top、right、bottom** 或 **left** 屬性才能根據需要對其進行定位。

使用者可以按照以下語法使用 position 屬性。

語法

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit";

以上語法將所需的 position 型別設定為元素的樣式。

引數

**static** - 元素遵循文件流。
**absolute** - 元素相對於其第一個非靜態祖先元素。
**fixed** - 元素相對於瀏覽器視窗。
**relative** - 元素相對於其實際位置。
**sticky** - 元素根據滾動位置顯示。
**initial** - 將此屬性設定為其預設值。
**inherit** - 從其父元素繼承此屬性。

此屬性的預設值為 static。返回值是一個字串，表示用於元素的定位方法型別。

示例 1

在下面的示例中，我們使用 position 屬性設定位置。您可以嘗試執行以下程式碼來使用 JavaScript 設定元素的定位方法型別：


<!DOCTYPE html>
<html>
<head>
   <style>
      #box {
         width: 350px;
         height: 200px;
         background-color: orange;
         border: 3px solid red;
         position: relative;
         top: 20px;
      }
   </style>
</head>
<body>
   <p>Click to set the type of positioning method using position
   property.</p>
   <button type = "button" onclick = "display()">Set Position</button>
   <div id = "box">
      <p>This is a div. This is a div. This is a div. This is a div.
      This is a div.<p>
      <p>This is a div. This is a div. This is a div. This is a div.
      This is a div.<p>
      <p>This is a div. This is a div. This is a div. This is a div.
      This is a div.<p>
   </div>
   <br>
   <br>
   <script>
      function display() {
         document.getElementById("box").style.position = "absolute";
      }
   </script>
</body>
</html>

示例 2

在這裡，我們將多個 position 型別設定為不同的元素。當用戶按下按鈕時，我們呼叫函式以使用上面給出的語法設定 position 型別。


<html>
<head>
   <style>
   #parent2{
      border:2px solid #9370DB;
      color:#A9A9A9;
      padding:20px;
   }
   #element2{
      border:1px dotted #BDB76B;
      background-color:#C71585;
      padding:20px;
      color:#DAA520;
   }
   #parent3{
      color:#FFFFFF;
      padding:50px;
      background-color:#191970;
      margin-top:50px;
   }
   #element3{
      background-color:#20B2AA;
      padding:20px;
      color:#000;
      bottom:0;
      left:0;
      right:0;
   }
   .p3{
      margin:0 auto;
      max-width:600px;
      margin-top:40px;
      line-height:1.5;
      height:500px;
   }
   nav{
      background:#3CB371;
      padding:0.15em 0;
      width:100%;
   }
   nav ul{
      display:flex;
   }
   nav ul li{
      margin-left:2.5em;
   }
   nav ul li a{
      color:#fff;
      text-decoration:none;
   }
   nav#nav-sticky{
      top:0px;
   }
   header{
      background:purple;
      color:#fff;
      display:flex;
      min-height:250px;
      justify-content:center;
      align-items:center;
   }
   header h1{
      font-size:3.5em;
   }
   article{
      line-height:1.5em;
      margin-left:auto;
      margin-right:auto;
      max-width:50rem;
      padding-left:5%;
      padding-right:5%;
   }
   article h1{
      padding-top:75px;
   }
   #posTypMultWrap2,
   #posTypMultWrap3,
   #posTypMultWrap4{
      display:none;
   }
   #posTypMultBtnWrap{
      float:left;
   }
   </style>
</head>
<body>
   <h2> Set the position type of multiple elements using
      the <i> position </i> property.
   </h2>
   <div id = "posTypMultWrap2">
      <b>Position type - absolute</b>
      <div id = "parent2">Parent
         <div id = "element2"> Child </div>
      </div>
      <br><br>
   </div>
   <div id = "posTypMultWrap3">
      <b> Position type - fixed</b>
      <div id = "parent3">Parent
         <div id = "element3">Child</div>
      </div>
      <p class = "p3">
      </p>
   </div>
   <div id = "posTypMultWrap4">
      <b>Position type - sticky</b>
      <nav class = "nav-main">
         <ul>
            <li>
               <a>Block1</a>
            </li>
            <li>
               <a>Block2</a>
            </li>
            <li>
               <a>Block3</a>
            </li>
         </ul>
      </nav>
      <header>
         <h1>Block1</h1>
      </header>
      <nav id="nav-sticky">
         <ul>
            <li>
               <a>Set1</a>
            </li>
            <li>
               <a>Set2</a>
            </li>
            <li>
               <a>Set3</a>
            </li>
         </ul>
      </nav>
      <article>
         <h1>Data</h1>
         <p style="height: 1500px;">
         </p>
      </article>
   </div>
   <div id="posTypMultBtnWrap">
      <p>Click on the buttons to set different position types.</p>
      <button onclick="setMultPosType(2);">Absolute</button>
      <button onclick="setMultPosType(3);">Fixed</button>
      <button onclick="setMultPosType(4);">Sticky</button>
   </div>
</body>
<script>
   function setMultPosType(type){
      var posTypMultBtnWrap =
      document.getElementById("posTypMultBtnWrap");
      var posTypMultEl2 = document.getElementById("posTypMultWrap2");
      var posTypMultEl3 = document.getElementById("posTypMultWrap3");
      var posTypMultEl4 = document.getElementById("posTypMultWrap4");
      var posEl2 = document.getElementById("element2");
      var posEl3 = document.getElementById("element3");
      var parEl3 = document.getElementById("parent3");
      var posEl4 = document.getElementById("nav-sticky");
      if(type == 2){
         posEl2.style.position = "absolute";
         posTypMultEl2.style.display = "block";
      }
      else if(type == 3){
         parEl3.style.position = "relative";
         posEl3.style.position = "fixed";
         posTypMultEl3.style.display = "block";
      }
      else{
         posEl4.style.position = "sticky";
         posEl4.style.position = "-webkit-sticky";
         posTypMultEl4.style.display = "block";
      }
   }
</script>
</html>

示例 3

在此程式中，我們將相對 position 型別設定為元素。當用戶按下按鈕時，我們呼叫函式以使用上面給出的語法設定 position 型別。


<html>
<head>
   <style>
      #parent{
         border:2px solid #483D8B;
         color:#5F9EA0;
         padding:20px;
      }
      #element{
         border:1px dotted #2F4F4F;
         background-color:grey;
         padding:20px;
         color:#000;
         margin-top:10px;
         -webkit-animation: push ease 5s alternate infinite;
         animation: push ease 5s alternate infinite;
         -webkit-animation-delay:1.5s;
         animation-delay:1.5s;
      }
      @-webkit-keyframes push{
         0% {
            left:0;
            top:0;
         }
         50% {
            left:-100px;
            top:100px;
         }
         100% {
            top:50px;
            left:50px;
         }
      }
      @keyframes push{
         0% {
            left:0;
            top:0;
         }
         50% {
            left:-100px;
            top:100px;
         }
         100% {
            top:50px;
            left:50px;
         }
      }
      #posTypSimpWrap{
         display:none;
      }
      #posTypSimpBtnWrap{
         float:left;
      }
   </style>
</head>
<body>
   <h2>Set the position type of an element using
      <i> the position property.</i>
   </h2>
   <div id="posTypSimpWrap">
      <b>Relative position</b>
      <div id="parent">Parent
         <div id="element">Child</div>
      </div>
   </div>
   <div id="posTypSimpBtnWrap">
      <p>Click on the button to set position type.</p>
      <button onclick="setPosType();">Set</button>
   </div>
</body>
<script>
   function setPosType(){
      var posTypSimpBtnWrap =
      document.getElementById("posTypSimpBtnWrap");
      posTypSimpBtnWrap.style.display = "none";
      var posTypSimpEl = document.getElementById("posTypSimpWrap");
      var posEl = document.getElementById("element");
      posEl.style.position = "relative";
      posTypSimpEl.style.display = "block";
   }
</script>
</html>

在本教程中，我們學習了 JavaScript 中的 position 屬性，用於設定元素的定位方法型別。

實現非常簡單，因為它是一個 JavaScript 內建屬性。

Shubham Vora

更新於：2022年10月25日

188 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習