CSS 絕對定位屬性absolute用法初探

2020-12-16 51CTO

CSS 絕對定位屬性absolute用法初探

本文向大家介紹一下CSS絕對定位屬性：absolute屬性的用法，CSS絕對定位使元素的位置與文檔流無關，因此不佔據空間。

作者：admin來源：68tt.com|2010-08-25 14:45

CSS 絕對定位的用法你是否熟悉，這裡和大家分享一下CSS 絕對定位的屬性absolute，希望對你的學習有所幫助。

CSS absolute屬性

設置為絕對定位的元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

CSS 絕對定位

絕對定位使元素的位置與文檔流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。

普通流中其它元素的布局就像絕對定位的元素不存在一樣，代碼如下：

  1. #box_relative{  
  2. position:absolute;  
  3. left:30px;  
  4. top:20px;  
  5. }  

效果如下圖所示：

絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。

對於定位的主要問題是要記住每種定位的意義。所以，現在讓我們複習一下學過的知識吧：相對定位是「相對於」元素在文檔中的初始位置，而絕對定位是「相對於」最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼「相對於」最初的包含塊。

注釋：根據用戶代理的不同，最初的包含塊可能是畫布或HTML元素。

提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置z-index屬性來控制這些框的堆放次序。

CSS絕對定位實例

  1. <html>
  2. <head><styletypestyletype="text/css"> 
  3. h2.pos_abs{position:absolute;left:100px;top:150px}</style> 
  4. </head>
  5. <body><h2classh2class="pos_abs"> 
  6. 這是帶有絕對定位的標題<p> 
  7. 通過絕對定位，元素可以放置到頁面上的任何位置。  
  8. 下面的標題距離頁面左側100px，距離頁面頂部150px。</p> 
  9. </body> 
  10. </html> 
  11.  

【編輯推薦】

  1. 探究CSS display屬性用法
  2. CSS 尺寸屬性用法解讀
  3. 探究CSS中border-top屬性的使用
  4. CSS中使用margin屬性定義網頁邊距
  5. CSS中cellspacing和cellpadding屬性用法揭秘

【責任編輯：

程華權

TEL：（010）68476606】

點讚 0

相關焦點

  • CSS中position屬性的用法和作用
    CSS中position屬性的用法和作用 本文向大家介紹一下CSS中Position屬性的用法和作用，Position屬性有四個可選值，它們分別是：static、absolute、fixed、relative。
  • 20-CSS 絕對定位 absolute
    CSS絕對定位絕對定位：塊元素完全從文檔流中刪除，並通過精確的定位屬性值來確定元素的位置。
  • 學習筆記 CSS clip屬性用法指導
    學習筆記 CSS clip屬性用法指導 你對CSS clip 屬性的用法是否了解，這裡向大家簡單描述一下，clip 屬性剪裁絕對定位元素，即這個屬性用於定義一個剪裁矩形。
  • CSS之定位一(position屬性)
    本文我們討論涉及定位的position屬性。首先我們來看一下position對應的值及其含義（表1）。圖2：內外框html和相同部分cssabsolute表示絕對位置，其在文檔流中不佔空間，其參考對象是離該元素最近的position值不是static的父元素。由圖3可以看出。
  • 詳解CSS定位屬性Position用法
    詳解CSS定位屬性Position用法 CSS中最常用的布局類屬性，一個是Float(CSS浮動屬性Float詳解)，另一個就是CSS定位屬性Position，這裡向大家描述一下CSS定位屬性Position的用法。
  • 剖析CSS relative相對定位用法
    剖析CSS relative相對定位用法 上節介紹了CSS絕對定位的概念，這裡和大家分享一下CSS relative相對定位的用法，設置為相對定位的元素框會偏移某個距離。
  • HTML+CSS:css定位詳解之相對定位、絕對定位和固定定位
    本篇文章我們主要給大家說一下css的定位。css的定位是我們以後網頁製作中比較常用的屬性，也是很重要的知識點。了解各個定位的作用以及層級關係對以後的頁面布局至關重要。css定位主要有四種，靜態定位、相對定位、絕對定位和固定定位。其中靜態定位這個是元素的默認定位方式，不能使用top，bottom，left，right和z-index屬性，其它三種定位可以使用以上幾個屬性。我們這裡主要介紹後邊的這三個定位。
  • css right屬性右邊緣偏移
    right屬性定義及用法在css中，right屬性是使用來定義定位元素右外邊距邊界與其包含塊右邊界之間的偏移。和該屬性相似的屬性有left、top、bottom，通常相互配合用來定位元素的位置。這幾個偏移屬性必須和position屬性一起使用，而其position屬性值不能為static（默認），不然left、right、top、bottom偏移屬性是沒有效果的；對於static元素，為auto；對於長度值，則為相應的絕對長度；對於百分比數值，為指定值；否則為auto。對於相對定義元素，left的計算值始終等於right。
  • CSS中position定位和z-index屬性用法詳解
    你對CSS中的position定位和z-index屬性的用法是否了解，position屬性中static、absolute、relative三個參數，這裡和大家分享一下其用法。深入理解CSS中的position定位和z-index屬性由於平時不太用到，所以過去寫CSS的時候對於position屬性的absolute、relative值理解比較模糊，對於z-index的層疊更是摸不著頭腦，除了理解的因素外，各個瀏覽器的不同解析結果也是一個大問題。
  • div+css定位技術之相對定位和絕對定位
    1.relative：相對定位說明：定位元素相對原來的自己進行定位的方式，脫離普通的文檔流，依然佔用原來空間<!Author"content=""><metaname="Keywords"content=""><metaname="Description"content=""><title>Document</title><styletype="text/css
  • css left屬性左邊緣偏移
    left屬性定義及用法在css中，left屬性是使用來定義定位元素左外邊距邊界與其包含塊左邊界之間的偏移，其實就是元素向右的偏移量；left屬性通常和position、right、top、bottom等屬性一起使用
  • 對CSS中的Position、Float屬性的一些深入探討
    1、HTML布局的基本要點（點我直接跳轉）2、Position屬性（點我直接跳轉）屬性值介紹用法介紹一些關於position的小知識3、Float屬性（點我直接跳轉）屬性值介紹用法介紹與Position之間的兼容問題HTML布局的基本要點：
  • CSS定位屬性Position詳解
    CSS中最常用的布局類屬性，一個是Float（CSS浮動屬性Float詳解），另一個就是CSS定位屬性Position。如果給 div-1a 設置 absolute 定位，就可以把 div-1a 移動到 div-1 的右上方。
  • CSS之定位二(偏移屬性)
    本文我們接著之前的定位話題來展開討論偏移屬性。偏移屬性理解起來其實很簡單，就是負責告訴瀏覽器元素相對於父元素的偏移位置。這裡要說明兩點：1、偏移屬性只對定位元素（即position值不是static的元素）有效；2、這裡的父元素是之前《css之定位一（position屬性）》中談論的父元素。偏移屬性有top、bottom、left、right四個屬性，其屬性值各自對應length、percentage、auto、inherit四種（即長度值、百分比、自動、繼承）。
  • DIV absolute與relative簡單用法解析
    DIV absolute與relative簡單用法解析 本文向大家介紹一下DIV absolute與relative簡單用法，absolute是絕對定位，relative是相對定位，那麼它們是如何使用的呢，請看本文詳細介紹。
  • css中的絕對定位和 相對定位
    ，難就難在相對定位與絕對定位的配合上，不知道他們兩個之間具體有什麼區別。這節課主要講講absolute（絕對定位）和 relative（相對定位）。【position:absolute】意思是：絕對定位，他默認參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位。
  • 相對定位、絕對定位、固定定位(position)
    相對定位css相對定位效果 absolute：絕對定位，相對於它上一個已經定位的祖先元素進行定位，如果所有祖先元素都沒有定位就以當前屏幕進行定位。絕對定位css固定定位css固定定位效果註：加了絕對定位和固定定位之後元素模式也會跟著變化，轉為行內塊。
  • 實例解析HTML DOM position屬性用法
    實例解析HTML DOM position屬性用法 CSS中position屬性的用法相信大家應該有所了解，這裡向大家描述一下HTML DOM position屬性的定義，position屬性把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
  • 深入探究DIV CSS布局中position屬性用法
    本文向大家描述一下DIV CSS布局中的position屬性的用法，position屬性主要有四種屬性值，任何元素的默認position的屬性值均是static,靜態。這節課主要講講relative（相對）以及absolute（絕對）。
  • CSS+DIV常見的三種元素定位方式,你知道幾個?
    css中元素的定位複雜的網頁布局都是通過各種網頁元素靈活定位實現的，網頁中的各種元素定位都有自己的特點。今天為大家聊一下css中常用的三種定位方法。另外可以使用clear:both屬性消除上面對下面的排版影響。下圖是一段簡單的CSS+DIV代碼，A是B、C和D的父元素，B元素使用了左float定位，C元素使用了有float定位，D元素使用了clear:both清除浮動影響。