HTML Style position用法及代碼示例

position屬性設置或返回元素使用的定位方法的類型。它可以是靜態的，相對的，絕對的或固定的。

用法:

返回位置語法：
```
object.style.position
```

設置位置語法：

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

返回值：它返回一個表示元素位置類型的字符串。

屬性：

static:這是默認屬性。根據文檔流，文檔中元素的外觀保持靜態。
Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <h1> 
      <center>Geeks  
         <button onclick="position()"> 
          Press 
         </button> 
      </center>  
  </h1> 
    <br> 
  
    <style> 
        #gfg { 
            border:1px solid black; 
            background-color:green; 
            width:215px; 
            height:60px; 
            position:relative; 
            top:100px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="gfg"> 
  
            <h4>DOM Style Position Property</h4> 
  
    </div> 
  
    <script> 
        function position() { 
            
            //  change position from reletive  
            //  to static. 
            document.getElementById( 
              "gfg").style.position = "static"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

absolute:它將元素相對於第一個定位的元素進行定位。
Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <h1> 
      <center>Geeks 
         <button onclick="position()"> 
          Press 
         </button> 
      </center>  
  </h1> 
    <br> 
  
    <style> 
        #gfg { 
            border:1px solid black; 
            background-color:green; 
            width:215px; 
            height:60px; 
            position:relative; 
            top:100px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="gfg"> 
        <p> 
            <h4>DOM Style Position Property</h4></p> 
  
    </div> 
  
    <script> 
        function position() { 
            
            //  Set position from 
            //  reletive to absolute. 
            document.getElementById( 
              "gfg").style.position = "absolute"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

fixed:它將元素相對於瀏覽器窗口定位。
Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <h1> 
     <center>Geeks  
         <button onclick="position()"> 
          Press 
         </button> 
      </center> 
  </h1> 
    <br> 
  
    <style> 
        #gfg { 
            border:1px solid black; 
            background-color:green; 
            width:215px; 
            height:60px; 
            position:relative; 
            top:100px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="gfg"> 
         <h4>DOM Style Position Property</h4> 
    </div> 
  
    <script> 
        function position() { 
            document.getElementById( 
              "gfg").style.position = "fixed"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

relative:它將元素相對於正常位置定位，因此“right:40”表示在元素的RIGHT位置增加了40個像素。
Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <h1> 
    <center>Geeks  
         <button onclick="position()"> 
          Press 
         </button> 
      </center>  
  </h1> 
    <br> 
  
    <style> 
        #gfg { 
            border:1px solid black; 
            background-color:green; 
            width:215px; 
            height:60px; 
            position:relative; 
            top:100px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="gfg"> 
       <h4>DOM Style Position Property</h4> 
  
    </div> 
  
    <script> 
        function position() { 
            document.getElementById( 
              "gfg").style.position = "relative"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

sticky:它根據用戶的滾動位置定位元素。滾動操作在相對和固定屬性值之間執行。默認情況下，滾動位置設置為相對值。
Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <h1> 
    <center>Geeks  
         <button onclick="position()"> 
          Press 
         </button> 
      </center>  
    </h1> 
    <br> 
  
    <style> 
        #gfg { 
            border:1px solid black; 
            background-color:green; 
            width:215px; 
            height:60px; 
            position:relative; 
            top:100px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="gfg"> 
            <h4>DOM Style Position Property</h4> 
    </div> 
  
    <script> 
        function position() { 
            document.getElementById( 
              "gfg").style.position = "sticky"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

注意：Internet Explorer不支持此屬性值，Apple Safari從6.1版本開始支持此屬性。

initial:它將位置設置為默認值。
Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <h1> 
    <center>Geeks  
         <button onclick="position()"> 
          Press 
         </button> 
      </center>  
  </h1> 
    <br> 
  
    <style> 
        #gfg { 
            border:1px solid black; 
            background-color:green; 
            width:215px; 
            height:60px; 
            position:relative; 
            top:100px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="gfg"> 
       <h4>DOM Style Position Property</h4> 
  
    </div> 
  
    <script> 
        function position() { 
            document.getElementById( 
              "gfg").style.position = "initial"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

inherit:它繼承了父元素的位置值。
Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <h1> 
    <center>Geeks  
         <button onclick="position()"> 
          Press 
         </button> 
      </center>  
  </h1> 
    <br> 
  
    <style> 
        #gfg { 
            border:1px solid black; 
            background-color:green; 
            width:215px; 
            height:60px; 
            position:relative; 
            top:100px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="gfg"> 
            <h4>DOM Style Position Property</h4> 
  
    </div> 
  
    <script> 
        function position() { 
            document.getElementById( 
              "gfg").style.position = "inherit"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

瀏覽器支持：DOM position屬性支持的瀏覽器如下：

穀歌瀏覽器
IE瀏覽器
Firefox
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自riarawal99大神的英文原創作品 HTML | DOM Style position Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。