實例解析HTML DOM position屬性用法

2020-12-15 51CTO

實例解析HTML DOM position屬性用法

CSS中position屬性的用法相信大家應該有所了解，這裡向大家描述一下HTML DOM position屬性的定義，position屬性把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。

作者：admin來源：w3school.com.cn|2010-09-15 14:40

本節向大家介紹一下HTML DOM position屬性的定義和用法，position屬性可能的值大致有四種，分別是static|relative|absolute|fixed，這裡通過實例向大家解析它的用法，相信本文介紹一定會讓你有所收穫。

HTML DOM position屬性

定義和用法

position 屬性把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。

語法：

Object.style.position=static|relative|absolute|fixed

可能的值

實例

本例把元素位置由相對改為絕對：

  1. <html> 
  2. <head> 
  3. <style type="text/css"> 
  4. input  
  5. {  
  6. position:relative;  
  7. }  
  8. </style> 
  9. <script type="text/javascript"> 
  10. function setPositionAbsolute()  
  11. {  
  12. document.getElementById("b1").style.position="absolute";  
  13. document.getElementById("b1").style.top="10px";  
  14. }  
  15. </script> 
  16. </head> 
  17. <body> 
  18.  
  19. <p>This is an example paragraph</p> 
  20. <p>HTML DOM position 屬性</p> 
  21.  
  22. <input type="button" id="b1" 
  23. onclick="setPositionAbsolute()" 
  24. value="Set button position to be absolute" /> 
  25.  
  26. </body> 
  27. </html> 

【編輯推薦】

  1. HTML中應用CSS的三種方法
  2. CSS中三大position屬性值用法解讀
  3. 深入探究DIV CSS布局中position屬性用法
  4. CSS屬性display:inline-block使用揭秘
  5. CSS background-position屬性定義和用法解讀

【責任編輯：

程華權

TEL：（010）68476606】

點讚 0

相關焦點

  • HTML DOM display屬性語法實例解析
    HTML DOM display屬性語法實例解析 大家對CSS display屬性的用法應該比較熟悉，這個屬性用於定義建立布局時元素生成的顯示框類型，那麼HTML DOM display 屬性有何用途呢，請看本文詳細介紹。
  • 詳解CSS定位屬性Position用法
    詳解CSS定位屬性Position用法 CSS中最常用的布局類屬性，一個是Float(CSS浮動屬性Float詳解)，另一個就是CSS定位屬性Position，這裡向大家描述一下CSS定位屬性Position的用法。
  • CSS中position定位和z-index屬性用法詳解
    你對CSS中的position定位和z-index屬性的用法是否了解，position屬性中static、absolute、relative三個參數，這裡和大家分享一下其用法。深入理解CSS中的position定位和z-index屬性由於平時不太用到，所以過去寫CSS的時候對於position屬性的absolute、relative值理解比較模糊，對於z-index的層疊更是摸不著頭腦，除了理解的因素外，各個瀏覽器的不同解析結果也是一個大問題。
  • 實例解析CSS padding 屬性用法
    實例解析CSS padding 屬性用法 本文向大家介紹一下CSS padding 屬性的定義和用法，padding 簡寫屬性在一個聲明中設置所有內邊距屬性。這個簡寫屬性設置元素所有內邊距的寬度，或者設置各邊上內邊距的寬度。
  • HTML實例源碼
    要求：知識要點： html 文檔的基本結構，html 標籤的書寫格式、作用、用法 實訓目的： 掌握 html 文檔的基本結構，掌握 html 代碼網頁編輯的基本方法實訓內容： <html> <head> <
  • CSS中position屬性的用法和作用
    CSS中position屬性的用法和作用 本文向大家介紹一下CSS中Position屬性的用法和作用，Position屬性有四個可選值，它們分別是：static、absolute、fixed、relative。
  • 一篇文章帶你了解JavaScript Html DOM html
    這個實例修改 <h1> 元素內容<!代碼解析在HTML文檔中包含一個id="header" 的<h1>元素。此示例修改<img>元素的src屬性:<!代碼解析HTML文檔包含一個id="myImage"的<img>元素。
  • 深入探究DIV CSS布局中position屬性用法
    本文向大家描述一下DIV CSS布局中的position屬性的用法，position屬性主要有四種屬性值，任何元素的默認position的屬性值均是static,靜態。這節課主要講講relative（相對）以及absolute（絕對）。
  • Perl if語句用法實例解析
    Perl if語句用法實例解析 Perl if語句的用法你是否了解，這裡通過實例向大家介紹一下，希望通過本文的介紹你對Perl if語句的用法有明確的認識。
  • CSS 絕對定位屬性absolute用法初探
    CSS 絕對定位屬性absolute用法初探 本文向大家介紹一下CSS絕對定位屬性：absolute屬性的用法，CSS絕對定位使元素的位置與文檔流無關，因此不佔據空間。
  • PHP Simple HTML DOM Parser
    simple_html_dom下載 http://sourceforge.net/projects/simplehtmldom/files/ PHP Simple HTML DOM解析器使用入門 http://www.cnphp.info/php-simple-html-dom-parser-intro.html
  • CSS之定位一(position屬性)
    本文我們討論涉及定位的position屬性。首先我們來看一下position對應的值及其含義（表1）。圖1：relative子元素位置變化圖1中外框和除position屬性值不一樣外，其他css屬性均一致，其內外框html和相同部分css見圖2。
  • html中標籤的用法介紹
    本篇將介紹的是html中link標籤的用法，感興趣的朋友可以了解一下！在html中，link標籤是一個很常用的標籤，它能讓文檔與外部資源建立聯繫。接下來我們一起來看看它的具體用法吧！「link」作為英文單詞有「連接/關係」的意思，那它作為html中的標籤又有什麼用途呢？我們一起來看看吧！
  • css left屬性左邊緣偏移
    left屬性定義及用法在css中，left屬性是使用來定義定位元素左外邊距邊界與其包含塊左邊界之間的偏移，其實就是元素向右的偏移量；left屬性通常和position、right、top、bottom等屬性一起使用
  • css right屬性右邊緣偏移
    right屬性定義及用法在css中，right屬性是使用來定義定位元素右外邊距邊界與其包含塊右邊界之間的偏移。和該屬性相似的屬性有left、top、bottom，通常相互配合用來定位元素的位置。這幾個偏移屬性必須和position屬性一起使用，而其position屬性值不能為static（默認），不然left、right、top、bottom偏移屬性是沒有效果的；對於static元素，為auto；對於長度值，則為相應的絕對長度；對於百分比數值，為指定值；否則為auto。對於相對定義元素，left的計算值始終等於right。
  • Dom樹 CSS樹 渲染樹(render樹) 規則、原理
    瀏覽器將HTML解析成樹形的數據結構，簡稱DOM。 DOM 是文檔對象模型 (Document Object Model) 的縮寫。它是 HTML 文檔的對象表示，同時也是外部內容（例如 JavaScript）與 HTML 元素之間的接口。解析樹的根節點是Document對象。
  • 對CSS中的Position、Float屬性的一些深入探討
    1、HTML布局的基本要點（點我直接跳轉）2、Position屬性（點我直接跳轉）屬性值介紹用法介紹一些關於position的小知識3、Float屬性（點我直接跳轉）屬性值介紹用法介紹與Position之間的兼容問題HTML布局的基本要點：
  • 學習筆記 CSS clip屬性用法指導
    學習筆記 CSS clip屬性用法指導 你對CSS clip 屬性的用法是否了解，這裡向大家簡單描述一下，clip 屬性剪裁絕對定位元素，即這個屬性用於定義一個剪裁矩形。
  • 2019前端面試經典(html5+css3+JavaScript)
    要被解析的字符串。radix 可選。表示要解析的數字的基數。該值介於 2 ~ 36 之間。如果省略該參數或其值為 0，則數字將以 10 為基礎來解析。如果它以 「0x」 或 「0X」 開頭，將以 16 為基數。
  • DIV+CSS中padding和margin屬性用法
    DIV+CSS是現在網頁布局的主流，你對其中的padding和margin兩個重要屬性的用法是否了解，這裡和大家分享一下，相信本文介紹一定會讓你有所收穫。