絕對的位置，但相對於父母

291

我有另一個div內的兩個div，我想定位一個子div到父div的右上角，另一個子div使用css的父div的底部。也就是說，我想對兩個子div使用絕對定位，但將它們相對於父div而不是頁面進行定位。我怎樣才能做到這一點？絕對的位置，但相對於父母

樣本HTML：

<div id="father"> 
    <div id="son1"></div> 
    <div id="son2"></div> 
</div>

來源

2012-05-07 BlaShadow

你想SON1是在父親的右上角但是在底部應該son2是什麼？底部左，右，還是中心？ – j08691

在這種情況下，您需要設置位置：相對於父元素，以及位置：絕對值到子元素。在第一個子元素上，應該放置top：0和right：0以將其放置在父元素的右上角。在第二個孩子，你應該把底部：0放置在父元素的底部。 https://kolosek.com/css-position-relative-vs-position-absolute 詳細解釋了相對和絕對定位。 –

541

#father { 
    position: relative; 
} 

#son1 { 
    position: absolute; 
    top: 0; 
} 

#son2 { 
    position: absolute; 
    bottom: 0; 
}

這工作，因爲position: absolute意味着類似「使用top，right，bottom，left給自己定位有關誰擁有position: absolute或position: relative最近的祖先「。

所以我們做#father有position: relative，和孩子們position: absolute，然後用top和bottom給孩子定位。

來源

2012-05-07 18:44:11 Domenic

非常感謝。你能解釋一下它是如何工作的嗎？爲什麼？ – BlaShadow

爲什麼'#father {position：relative; '需要？需要 – joshreesjones

來更改他內部人員的「職位規則」。 – BlaShadow

div#father { 
    position: relative; 
} 
div#son1 { 
    position: absolute; 
    /* put your coords here */ 
} 
div#son2 { 
    position: absolute; 
    /* put your coords here */ 
}

來源

2012-05-07 18:43:49

如果您需要調整父母與孩子的大小，該怎麼辦？ – FrenkyB

如果您沒有給予父母任何職位，那麼默認情況下需要static。如果要明白，差參考本示例

實施例1 ::

http://jsfiddle.net/Cr9KB/1/

#mainall 
{ 

    background-color:red; 
    height:150px; 
    overflow:scroll 
}

這裏父類所以元件根據身體放置沒有位置。

實施例2 ::

http://jsfiddle.net/Cr9KB/2/

#mainall 
{ 
    position:relative; 
    background-color:red; 
    height:150px; 
    overflow:scroll 
}

在這個例子中具有父因此元件被定位相對母體內絕對相對位置。

來源

2014-03-13 11:12:28 anam

而且，如果您沒有#mainall {height：150px} ...，怎麼辦？我的意思是，如果mainall有動態高度？ –

那麼你的浮動元素將相對於父元素在加載頁面（和css）時的位置。如果你想在頁面加載後更新，使用javascript - clientX和clientY是一個很好的開始 –

櫃面有人想現在的位置是一個孩子DIV直屬父

#father { 
    position: relative; 
} 

#son1 { 
    position: absolute; 
    top: 100%; 
}

工作演示Codepen

來源

2017-04-05 07:11:27 petergus

絕對的位置，但相對於父母

回答

相關問題