位置绝对但相对于父级

Question

我在另一个div中有两个div,我想将一个子div放在父div的右上角,另一个子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: 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

如果有人想将孩子div直接放在父母的下面

#father {
   position: relative;
}

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

工作演示Codepen

Answer 4

如果您没有给父母任何职位,那么默认情况下需要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
}

在此示例中,父级具有相对位置,因此元素位于相对父级内的绝对位置.