绝对位置，但相对于父母
我在另一个div中有两个div，我想将一个div div定位到父div的右上角，而另一个div 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意味着像“使用top ， right ， bottom ， left来定位自己与最近的具有position: absolute祖先有关position: absolute position: relative 。
所以我们让#father有position: relative ，孩子有position: absolute ，然后用top和bottom来定位孩子。
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
}
在这个例子中，父亲具有相对位置，因此元素被定位在相对父亲的内部。
链接地址: http://www.djcxy.com/p/88547.html