when i use position:absolute in child block it does not refer parent block?

Question

In HTML,When you use the position:absolute css property in child block the absolute value is not taken from parent tag it refer from whole browser window. the sample code is shown below..

CSS

.parent {
    width: 400px;
    height: 400px;
    border: 1px solid green;
}

.child {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid red;
    bottom: 0px;
}

Why are you asking this question if you already know the answer? Anyone who even looks for the most basic `position:absolute` search query on Google will find that you need a `relative` container (or other non-`static`). The way I see it, you only asked this question to farm reputation from the system - you've gained 55 already! — Niet the Dark Absol, Sep 30 '13 at 12:30
@Kolink: Posting a question that you know the answer to and then answering it is fine, but you're right in that this is a really basic and frequently asked question that can be answered with a simple Google search. — BoltClock, Sep 30 '13 at 12:39
@ABFORCE: Spam has a very specific meaning. This is not spam. — BoltClock, Sep 30 '13 at 12:51
@Rajkumar: Sharing your knowledge is fine, but this has been asked before. Please search the site to make sure your question hasn't already been asked and answered elsewhere before you post it yourself. — BoltClock, Sep 30 '13 at 12:58

score 10 · Accepted Answer · edited Apr 23 '14 at 16:34

10

If you want the arrange the child with in the parent block just add position:relative in the parent CSS

edited Apr 23 '14 at 16:34

frogatto

28,539
11
83
129

answered Sep 30 '13 at 12:24

Rajkumar

197
3
13

Marc Audet · Answer 2 · 2013-09-30T12:36:23.720

2

The parent block needs to be have position set to a non-static value, that is: position: absolute, position: fixed or position: relative.

The value you need depends on the layout application.

edited Sep 30 '13 at 12:36

answered Sep 30 '13 at 12:27

Marc Audet

46,011
11
63
83

Gildas.Tambo · Answer 3 · 2013-09-30T12:41:17.920

.parent {
    width: 400px;
    height: 400px;
    border: 1px solid green;
    position:relative;/*this makes all my children s position relative to me */
}

.child {
    position: absolute;/* i have an absolute position and i am relative to my parent*/
    width: 200px;
    height: 200px;
    border: 1px solid red;
    bottom: 0px;
}

Demo: http://jsfiddle.net/pGvvq/

markup:

<section class=parent>
    this makes all my children s position relative to me
    <article class=child>
        i have an absolute position and i am relative to my parent
    </article>
</section>

enter image description here

READ more http://css-tricks.com/absolute-positioning-inside-relative-positioning/

when i use position:absolute in child block it does not refer parent block?

3 Answers3