當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS position属性absolute relative等五个值的解释

發布時間：2025/3/20 CSS 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS position属性absolute relative等五个值的解释小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目前幾乎所有主流的瀏覽器都支持position屬性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE瀏覽器，IE9、IE10還沒測試過），以下是w3school對position五個值的解釋,需要的朋友可以參考下

其中absolute和relative是最常用的，fixed用得也比較多（其中IE6并不支持fixed）。

1、absolute（絕對定位）

absolute是生成覺對定位的元素，脫離了文本流（即在文檔中已經不占據位置），參照瀏覽器的左上角通過top,right,bottom,left（簡稱TRBL）定位。可以選取具有定位的父級對象（下文將說到relative與absolute的結合使用）或者body坐標原點進行定位，也可以通過z-index進行層次分級。absolute在沒有設定TRBL值時是根據父級對象的坐標作為始點的，當設定TRBL值后則根據瀏覽器的左上角作為原始點。具體案例如下：

其中absolute和relative是最常用的，fixed用得也比較多（其中IE6并不支持fixed）。

1、absolute（絕對定位）

這是設定TRBL之后的效果(設置TRBL以瀏覽器左上角為原點)，當沒有設置TRBL時（沒有設置TRBL是以父級對象的坐標為原點），即將div1改成如下代碼時

.div1{ width:200px; height:200px; background:#0099FF; /*沒有設定TRBL*/ position:absolute; }

則效果如下：

2、relative（相對定位）

relative是相對的意思，顧名思義就是相對于元素本身在文檔中應該出現的位置來移動這個元素，可以通過TRBL來移動元素的位置，實際上該元素依然占據文檔中原有的位置，只是視覺上相對原來的位置有移動。具體案例如下：

代碼產生的效果如下：

3、relative與absolute的結合使用

在網頁設計時經常會用到浮動來對頁面進行布局，但是浮動所帶來的不確定因素卻很多（例如：IE瀏覽器的兼容問題）。相對來說，在有些布局中定位使用會更加簡單、快捷、兼容性更好（relative與absolute相結合來使用），下面通過網頁中的一個實例（網頁中的head部分）進行說明，具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> html,body,div,ul,li,a{ margin:0; padding:0; list-style:none; } a, a:hover{ color:#000; border:0; text-decoration:none; } #warp,#head,#main,#foot { width: 962px; } /*設置居中*/ #warp{ margin: 0 auto; } #head{ height:132px; position:relative; } .logo{ position:absolute; top:17px; } .head_pic{ position:absolute; top:17px; left:420px; } .sc{ position:absolute; right:5px; top:12px; } .sc a{ padding-left:20px; color:#666; } .nav{ width:960px; height:42px; line-height:42px; position:absolute; bottom:0px; background:url(img/nav_bj.jpg) no-repeat center; } .nav ul{ float:left; padding:0 10px; } .nav li{ float:left; background:url(img/li_bj.jpg) no-repeat right center; padding-right:40px; padding-left:20px; text-align:center; display:inline; } .nav li a{ font-size:14px; font-family:Microsoft YaHei !important; white-space:nowrap; } .nav li a:hover{ color:#FBECB7; } </style> <title></title> </head> <body> <div id="warp"> <div id="head"> <div class="logo"><img src="img/logo.jpg" /></div> <div class="head_pic"><img src="img/head_pic.jpg" /></div> <div class="sc"> <a href=""><img src="img/sc_btn.jpg" /></a> <a href=""><img src="img/sy_btn.jpg" /></a> <a href=""><img src="img/kf_btn.jpg" /></a> </div> <div class="nav"> <ul> <li><a href="">首頁</a></li> <li><a href="">關于我們</a></li> <li><a href="">團隊文化</a></li> <li><a href="">公司動態</a></li> <li><a href="">資訊參考</a></li> <li><a href="">業務中心</a></li> <li><a href="">合作銀行</a></li> <li><a href="">聯系我們</a></li> </ul> </div> </div> <div id="main"></div> <div id="foot"></div> </div> </body> </html>

效果如下圖：

在上述代碼中首先是給head設置relative定位，那么可以看到里面所有的子元素在設置absolute后都會相對head進行定位，而不是相對body定位。這樣相對于用浮動來說就簡單方便了很多，也不需要擔心兼容問題。

轉載于:https://www.cnblogs.com/ccode/p/4005280.html

總結

以上是生活随笔為你收集整理的CSS position属性absolute relative等五个值的解释的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： hdu 3863 No Gambling
下一篇： java操作word （jacob）