html-相對定位 & 絕對定位 [轉(zhuǎn)載]

層級關(guān)系為:

<div ————————position:relative; 不是最近的祖先定位元素,不是參照物
<div—————————沒有設(shè)置為定位元素,不是參照物
<div——————— position:relative 參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖:

為改變參照物(橘色框)后的效果層級關(guān)系為:
<div ——————————— position:relative;最近的祖先定位元素,參照物
<div—————————-沒有設(shè)置為定位元素,不是參照物
<div———————-沒有設(shè)置為定位元素,不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖:

參照物為最頂級的元素情況
層級關(guān)系為:
<div ———————————沒有設(shè)置為定位元素,不是參照物
<div—————————-沒有設(shè)置為定位元素,不是參照物
<div———————-沒有設(shè)置為定位元素,不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖:

僅使用margin屬性布局絕對定位元素的情況
此情況,margin-bottom 和margin-right的值不再對文檔流中的元素產(chǎn)生影響,因?yàn)樵撛匾呀?jīng)脫離了文檔流。另外,不管它的祖先元素有沒有定位,都是以文檔流中原來所在的位置上偏移參照物。
圖9中,使用margin屬性布局相對定位元素。
層級關(guān)系為:
<div ——————————— position:relative; 不是參照物
<div—————————-沒有設(shè)置為定位元素,不是參照物
<div———————-沒有設(shè)置為定位元素,不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖:

IE6的情況下,box2前面沒有兄弟節(jié)點(diǎn),則margin-left的值會出現(xiàn)雙倍邊距,見圖10。
層級關(guān)系為:
<div ——————————— position:relative; 不是參照物
<div—————————-沒有設(shè)置為定位元素,不是參照物
<div———————-沒有設(shè)置為定位元素,不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果圖:

出處: http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 本課來自http://www.imooc.com/learn/9請不要用作商業(yè)用途。 HTML5 HTML介紹 H...
    PYLON閱讀 3,307評論 0 5
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,792評論 1 92
  • CSS格式化排版 1、字體 我們可以使用css樣式為網(wǎng)頁中的文字設(shè)置字體、字號、顏色等樣式屬性。下面我們來看一個例...
    張文靖同學(xué)閱讀 1,301評論 0 3
  • 權(quán)重 一、權(quán)重,了解權(quán)重必須先了解css樣式的6種基礎(chǔ)選擇器 二、其它的選擇符均可由基本的組成,組合的方式分為三種...
    _呵呵俊_閱讀 694評論 0 2
  • 本文主要是起筆記的作用,內(nèi)容來自慕課網(wǎng). 認(rèn)識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,662評論 0 30