HTML | DOM 样式位置属性

position 属性设置或返回元素使用的定位方法的类型。它可以是静态的、相对的、绝对的或固定的。

句法：

• 返回位置语法：

  object.style.position

• 设置位置语法：

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

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

特性：

1. 静态：这是默认属性。文档中元素的外观根据文档流保持静态。
   例子：

     
   
       
         Geeks 
            
             Press
            
          
     
       
     
       
           #gfg {
               border: 1px solid black;
               background-color: green;
               width: 215px;
               height: 60px;
               position: relative;
               top: 100px;
           }
       
   
     
   
     
       
     
               DOM Style Position Property
     
       
     
       
           function position() {
               
               //  change position from reletive 
               //  to static.
               document.getElementById(
                 "gfg").style.position = "static";
           }
       
     
   
     

   输出：

   • 在点击按钮之前：
     
   • 点击按钮后：
     
2. 绝对：它相对于第一个定位元素定位元素。
   例子：

     
   
       
         Geeks
            
             Press
            
          
     
       
     
       
           #gfg {
               border: 1px solid black;
               background-color: green;
               width: 215px;
               height: 60px;
               position: relative;
               top: 100px;
           }
       
   
     
   
     
       
           
               DOM Style Position Property
     
       
     
       
           function position() {
               
               //  Set position from
               //  reletive to absolute.
               document.getElementById(
                 "gfg").style.position = "absolute";
           }
       
     
   
     

   输出：

   • 在点击按钮之前：
     
   • 点击按钮后：
     
3. 固定：它相对于浏览器窗口定位元素。
   例子：

     
   
       
        Geeks 
            
             Press
            
         
     
       
     
       
           #gfg {
               border: 1px solid black;
               background-color: green;
               width: 215px;
               height: 60px;
               position: relative;
               top: 100px;
           }
       
   
     
   
     
       
            DOM Style Position Property
       
     
       
           function position() {
               document.getElementById(
                 "gfg").style.position = "fixed";
           }
       
     
   
     

   输出：

   • 在点击按钮之前：
     
   • 点击按钮后：
     
4. 相对：它相对于正常位置定位元素，所以“右：40”表示元素的右位置增加了40个像素。
   例子：

     
   
       
       Geeks 
            
             Press
            
          
     
       
     
       
           #gfg {
               border: 1px solid black;
               background-color: green;
               width: 215px;
               height: 60px;
               position: relative;
               top: 100px;
           }
       
   
     
   
     
       
          DOM Style Position Property
     
       
     
       
           function position() {
               document.getElementById(
                 "gfg").style.position = "relative";
           }
       
     
   
     

   输出：

   • 在点击按钮之前：
     
   • 点击按钮后：
     
5. 粘性：根据用户的滚动位置来定位元素。滚动操作在相对和固定属性值之间进行。默认情况下，滚动位置设置为相对值。
   例子：

     
   
       
       Geeks 
            
             Press
            
          
       
       
     
       
           #gfg {
               border: 1px solid black;
               background-color: green;
               width: 215px;
               height: 60px;
               position: relative;
               top: 100px;
           }
       
   
     
   
     
       
               DOM Style Position Property
       
     
       
           function position() {
               document.getElementById(
                 "gfg").style.position = "sticky";
           }
       
     
   
     

   输出：

   • 在点击按钮之前：
     
   • 点击按钮后：
     

   注意： Internet Explorer 不支持此属性值，Apple Safari 从 6.1 版本开始支持此属性。

6. 初始：它将位置设置为其默认值。
   例子：

     
   
       
       Geeks 
            
             Press
            
          
     
       
     
       
           #gfg {
               border: 1px solid black;
               background-color: green;
               width: 215px;
               height: 60px;
               position: relative;
               top: 100px;
           }
       
   
     
   
     
       
          DOM Style Position Property
     
       
     
       
           function position() {
               document.getElementById(
                 "gfg").style.position = "initial";
           }
       
     
   
     

   输出：

   • 在点击按钮之前：
     
   • 点击按钮后：
     
7. 继承：继承父元素的位置值。
   例子：

     
   
       
       Geeks 
            
             Press
            
          
     
       
     
       
           #gfg {
               border: 1px solid black;
               background-color: green;
               width: 215px;
               height: 60px;
               position: relative;
               top: 100px;
           }
       
   
     
   
     
       
               DOM Style Position Property
     
       
     
       
           function position() {
               document.getElementById(
                 "gfg").style.position = "inherit";
           }
       
     
   
     

   输出：

   • 在点击按钮之前：
     
   • 点击按钮后：
     

   浏览器支持： DOM position属性支持的浏览器如下：

   • 谷歌浏览器
   • IE浏览器
   • 火狐
   • 歌剧
   • 苹果浏览器