绝对的位置,但相对于父母

我有另一个div内的两个div,我想定位一个孩子div到父div的右上angular,另一个孩子div使用css的父div的底部。 也就是说,我想使用两个子div的绝对定位,但相对于父div而不是页面。 我该怎么做?

示例html:

<div id="father"> <div id="son1"></div> <div id="son2"></div> </div> 
 #father { position: relative; } #son1 { position: absolute; top: 0; } #son2 { position: absolute; bottom: 0; } 

这是有效的,因为position: absolute意味着像“使用toprightbottomleft来定位自己相对于最近的具有position: absolute祖先position: absolute或者position: relative

所以我们让#fatherposition: relative ,孩子有position: absolute ,然后用topbottom来定位孩子。

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

如果你不给父母任何职位,那么默认情况下,它是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 } 

在这个例子中,父亲具有相对位置,因此元素被定位在相对父亲的内部。

如果有人想要直接在父母下面设置一个子div,

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

工作演示Codepen