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

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

示例html：

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

Answer 1

 #father { position: relative; } #son1 { position: absolute; top: 0; } #son2 { position: absolute; bottom: 0; } 

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

所以我们让#father有position: relative ，孩子有position: absolute ，然后用top和bottom来定位孩子。

Answer 2

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

Answer 3

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

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

Answer 4

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

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

工作演示Codepen