Anonymous
Anonymous asked in 電腦與網際網路程式設計 · 7 years ago

誰可以詳解position:relative原理

我對書的說法還是模糊,目前我知道當父元素設定relative 而 子元素設定absolute再依照(left right)設定,會依照Relative的元使位子做設定。

但是我不懂書上所說的;屬性質如果設定Relative顯示結果。如果再分別設定為左上端距離100px,box將會衣照距離相對位置顯示。 "但是之後的BOX會當作被指定Relative的box仍在應存的位子上。

Update:

就是說之後的box如果設置不會再(0.0)這個位子上,而會在她因該有的位子上是吧^^?

Update 2:

*{margin:0 ; padding:0;}

#div_1{position:relative; width:400px; height:200px; left:50px; top:20px; background-color:#C03;}

#div_2{width:400px; height:200px; background-color:#C60}

是這樣的我意思是假如第一個設定相對位置之後,如果想要再創第二個div那麼她不會排列在div_1的位置上,而是會垂直往下繼續,對吧?

Update 3:

不不不,我是在針對這句話所翻譯出來的結果作了解XD

position:relative; 相對定位會保留元素位移前所佔的空間、形狀,其他元素不會自動取代位移後的元素原來缺省的位置。

2 Answers

Rating
  • Favorite Answer

    Dear ~

    有圖有真相,我用最簡單的方式作圖解示範說明之。

    《範例一》當父元素設置 position:relative; 以後(如下圖粉紅色區塊)

    圖片參考:http://i.imgur.com/J7JUgE4.png

    子元素再設置 position:absolute;,並設定 top:50px、left:100px; 定位子元素的偏移位置(如下圖『匿名』圖示區塊)

    圖片參考:http://i.imgur.com/YuaEyew.png

    《範例二》假設取消粉紅色區塊的 position:relative; 以及取消『匿名』圖示區塊的 position:absolute;,只定義『匿名』圖示區塊的 CSS:

    .qabox .hd .info .photo img {

    left: 100px;

    position: relative;

    top: 50px;

    }

    那麼排版結果會如下圖示範畫面:

    圖片參考:http://i.imgur.com/OT6iYyK.png

    看到《範例一》和《範例二》的『匿名』圖示位置變化了嗎?position:absolute; 是以父元素(外部區塊)的左上角為 (0,0) 座標原點來定位子元素(內部區塊)上、下、左、右的偏移位置。設置 position:absolute; 了之後,『匿名』圖示原來的位置不見了,變成「浮動層」,而原來的位置被右方的藍色區塊填空。

    《範例二》的『匿名』圖示改成設定 position:relative; 之後,以原來位置(範例圖中的虛線方框)的左上角為 (0,0) 座標原點定位該物件上、下、左、右的偏移位置,因為保留了原來所佔的空間,所以右方的藍色區塊還在原來的位置沒有位移。

    圖片參考:http://img.tongji.linezing.com/2917196/tongji.gif

    「但是之後的BOX會當作被指定Relative的box仍在應存的位子上」← 這句話淺顯易懂的解釋就是:之後的BOX=範例圖中的藍色區塊;被指定Relative的box=範例圖中的『匿名』圖示。

    position:relative; 相對定位會保留元素位移前所佔的空間、形狀,其他元素不會自動取代位移後的元素原來缺省的位置。

    希望對您有所助益~ ^_^

    2013-04-22 21:57:45 補充:

    就是說之後的box如果設置不會再(0.0)這個位子上,而會在她因該有的位子上是吧^^?

        ↑    ↑    ↑    ↑    ↑    ↑

    哎呀不妙!我聽不懂您在問什麼耶 >< .....

    如果「之後的box」是指範例圖中的藍色區塊,那麼藍色區塊設置 position:relative; 後,它是以自己原來位置的左上角為基準點,也就是那塊藍色區域的左上角。

    您的意思是這樣嗎?為避免雞同鴨講,建議提供網頁,有實際的 div 比較好說明,謝謝。

    2013-04-23 22:43:45 補充:

    #div_1{position:relative; width:400px; height:200px; left:50px; top:20px; background-color:#C03;}

    #div_2{width:400px; height:200px; background-color:#C60}

        ↑    ↑    ↑    ↑    ↑    ↑

    div_1 和 div_2 等寬等高看不出效果,我把 div_2 的寬高各減一半看比較清楚,就以上的CSS做出以下測試頁:http://www.dinkypage.com/170787

    2013-04-23 22:44:43 補充:

    以測試頁來看,div_2 和 div_1 的位置是重疊的,如果要調整 div_2 的位置有兩種方法:

    (方法一)

    #div_1 { position:relative; width:400px; height:200px; background-color:#C03;}

    #div_2 { position:absolute;left:50px; top:20px;width:200px; height:100px; background-color:#C60;}

    /* 以 div_1 為基準取 div_2 絕對位置 */

    2013-04-23 22:45:09 補充:

    (方法二)

    #div_2 { position:relative;left:50px; top:20px;width:200px; height:100px; background-color:#C60;}

    /* div_2 以自己為基準取相對位置 */

    「假如第一個設定相對位置之後,如果想要再創第二個div那麼她不會排列在div_1的位置上,而是會垂直往下繼續,對吧?」← 金害,這句話我還是看不懂 >< ......

    2013-04-23 22:45:31 補充:

    如果是沒有排版的情況下,當然第二個 div 會在第一個 div 的下方,所以才需要應用 position 屬性來幫第二個 div 定位。我們就以測試頁來看,您希望 div_2 要怎麼移動呢?給個具體的位置吧,否則很難回答。

    2013-04-24 23:02:07 補充:

    啊啊啊,還來不及補充就結案了XD

    我又做了一個更簡單易懂的測試頁二:

    http://www.dinkypage.com/170835

    一定要看喔!

  • 7 years ago

    對對對,我就是說這個意思~~~ 我完全了解了>

Still have questions? Get your answers by asking now.