Position absolute but relative to parent

I have two divs inside another div, and I want to position one child div to the top right of the parent div, and the other child div to the bottom of the parent div using css. Ie, I want to use absolute positioning with the two child divs, but position them relative to the parent div rather than the page. How can I do this?

Sample 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;
}

This works because position: absolute means something like "use top , right , bottom , left to position yourself in relation to the nearest ancestor who has position: absolute or position: relative ."

So we make #father have position: relative , and the children have position: absolute , then use top and bottom to position the children.

---

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

---

If you don't give any position to parent then by default it takes static . If you want to understand that difference refer to this example

Example 1::

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

   #mainall
{

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

Here parent class has no position so element is placed according to body.

Example 2::

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

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

In this example parent has relative position hence element are positioned absolute inside relative parent.

链接地址: http://www.djcxy.com/p/88548.html

上一篇: 在div中获取鼠标位置？

下一篇: 绝对位置，但相对于父母