DIV absolute與relative簡單用法解析

2020-12-27 51CTO

DIV absolute與relative簡單用法解析

本文向大家介紹一下DIV absolute與relative簡單用法，absolute是絕對定位，relative是相對定位，那麼它們是如何使用的呢，請看本文詳細介紹。

作者：sk1314來源：csdn.net|2010-08-17 10:39

本文和大家重點討論一下DIV absolute與relative簡單用法，我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什麼意思呢？絕對是什麼地方的絕對，相對又是相對於什麼地方而言的呢？請看下文詳細介紹。

DIV absolute與relative簡單用法

很多朋友問過我absolute與relative怎麼區分，怎麼用？我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什麼意思呢？絕對是什麼地方的絕對，相對又是相對於什麼地方而言的呢？那他們又有什麼樣的特性，可以做出什麼樣的效果呢？關於兩者之間又有什麼樣的技巧呢？下面我們就來一一解讀。

Absolute，CSS中的寫法是：position:absolute;他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。如果設定TRBL並且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。

一般來講，網頁居中的話用Absolute就容易出錯，因為網頁一直是隨著解析度的大小自動適應的，而Absolute則會以瀏覽器的左上角為原始點，不會應為解析度的變化而變化位置。很多人出錯就在於這點上出錯。而網頁居左其特性與Relative很相似，但是還是有本質的區別的。

Relative，CSS中的寫法是：position:relative;他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。


有時我們還需要依靠z-index來設定容器的上下關係，數值越大越在最上面，數值範圍是自然數。當然有一點要注意，父子關係是無法用z-index來設定上下關係的，一定是子級在上父級在下。

【編輯推薦】

  1. DIV樣式中一些特殊效果用法舉例
  2. 解析DIV布局之四大屬性用法
  3. Html中DIV和Span的區別揭秘
  4. 使用Div CSS構架的三大好處
  5. DIV CSS居中常見方法解析

【責任編輯：

程華權

TEL：（010）68476606】

點讚 0

相關焦點

  • 深入探究DIV CSS布局中position屬性用法
    本文向大家描述一下DIV CSS布局中的position屬性的用法，position屬性主要有四種屬性值，任何元素的默認position的屬性值均是static,靜態。這節課主要講講relative（相對）以及absolute（絕對）。
  • 詳解CSS定位屬性Position用法
    ，position屬性的參數主要有position:static，position:relative和position:absolute 等幾種，這裡學習一下他們的使用方法，相信本文介紹一定會讓你有所收穫。
  • 使用DIV+CSS 創建固定寬度的布局
    使用 div 進行頁面布局效果要好得多。除了這是推薦使用的最佳方法之外，代碼的裝載速度會更快，也更易於處理。表及其單元格的格式（formatting）屬性被借用到固定寬度布局中，因為指定這些元素的尺寸相當簡單。其實通過 div 可以做到同樣的事情，只要確定 div 精確的維數並使用絕對和相對定位將這些 div 定位到頁面上即可。
  • CSS中position定位和z-index屬性用法詳解
    你對CSS中的position定位和z-index屬性的用法是否了解，position屬性中static、absolute、relative三個參數，這裡和大家分享一下其用法。深入理解CSS中的position定位和z-index屬性由於平時不太用到，所以過去寫CSS的時候對於position屬性的absolute、relative值理解比較模糊，對於z-index的層疊更是摸不著頭腦，除了理解的因素外，各個瀏覽器的不同解析結果也是一個大問題。
  • 實例解析HTML DOM position屬性用法
    實例解析HTML DOM position屬性用法 CSS中position屬性的用法相信大家應該有所了解，這裡向大家描述一下HTML DOM position屬性的定義，position屬性把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
  • CSS中position屬性的用法和作用
    CSS中position屬性的用法和作用 本文向大家介紹一下CSS中Position屬性的用法和作用，Position屬性有四個可選值，它們分別是：static、absolute、fixed、relative。
  • 剖析CSS relative相對定位用法
    剖析CSS relative相對定位用法 上節介紹了CSS絕對定位的概念，這裡和大家分享一下CSS relative相對定位的用法，設置為相對定位的元素框會偏移某個距離。
  • 基於XHTML的DIV+CSS網頁製作布局技術
    文本流向對象的左邊　　它是怎樣工作的，看個一行兩列的例子　　xhtml:　　<div id="wrap">　　<div id="column1">這裡是第一列</div>　　<div id="column2">這裡是第二列</div>　　<div>
  • div+css定位技術之相對定位和絕對定位
    1.relative：相對定位說明：定位元素相對原來的自己進行定位的方式，脫離普通的文檔流，依然佔用原來空間<!{width:100px;height:100px;border:1px solid red;position:relative;left:100px;top:100px;}</style>
  • 常用DIV+CSS網頁製作布局技術技巧
    id="wrap"> <div id="column1">這裡是第一列</div> <div id="column2">這裡是第二列</div> <div class="clear"></div> /*這是違背web標準意圖的，只是想說明在它下面的元素需要清除浮動*/ </div>
  • Java開發之CSS中的absolute、fixed和relative如何選擇?
    前言在Jsp前端開發中，經常會碰到對層的相對定位和絕對定位，要想處理好層與層的關係，absolute、fixed和relative一定要掌握熟練。比較常見的使用像：回到頂部、對聯廣告、固定菜單等。任何元素都可以定位，不過絕對absolute或固定元素fixed會生成一個塊級框，而不論該元素本身是什麼類型。相對定位元素relative會相對於它在正常流中的默認位置偏移。
  • CSS 絕對定位屬性absolute用法初探
    CSS 絕對定位屬性absolute用法初探 本文向大家介紹一下CSS絕對定位屬性：absolute屬性的用法，CSS絕對定位使元素的位置與文檔流無關，因此不佔據空間。
  • 20-CSS 絕對定位 absolute
    例子：#div2{    position: absolute;    top: 20px;    left: 30px;}圖示如下：絕對定位圖示請比較和相對定位的不同，絕對定位後，框2原來的位置消失，框1和框3挨在了一起。框2的定位值（top和left取值）為相對其已定位的祖先元素。
  • CSS技巧:解決未知高度DIV垂直居中
    body { padding: 0; margin: 0;}body,html{ height: 100%;} #outer { height: 100%; overflow: hidden; position: relative
  • DIV+CSS常用的網頁布局代碼
    >#bodycenter #dv2 { float: right; width: 410px;}  #footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 單行三列 絕對定位以下是引用片段：#left { position: absolute