DIV changed its behaviour when "position:absolute" was added to it. Why?

Question

I'm new to CSS and I have a question.

First, my HTML and CSS code:

<!-- HTML CODE -->

<body>

    <div id="container">Container



    </div>
     <div id="inner">Inner</div>

</body>

<!-- CSS CODE -->


 #container { 
        background-color:#b6ff00;
        width:500px;
        height:500px;
        position:relative;
        }

        #inner {
        background-color:#ffd800;

        }

With current code, the browser shows the following page:

enter image description here

This is expected.

But if I add this css property to #inner element position:absolute; there will be a following output:

enter image description here

As you can see, the #inner div, takes only that much space it needs. Why this changed with only position:absolute; property added to #inner div?

possible duplicate of [Absolute Positioning & Text Alignment](http://stackoverflow.com/questions/2808592/absolute-positioning-text-alignment) — gpgekko, Jan 30 '14 at 14:01

score 3 · Accepted Answer · edited May 23 '17 at 11:56

That's because when you use position: absolute; the element will take up width upto the elements defined/content it contains., cuz it just gets out of the document flow so it is block level in nature but won't take up entire horizontal space on the document, as it's just out of the flow of the document..

If you want it to be full width you need to define width: 100%; explicitly so that it will take 100% of the relative parent's width as well as the height if you declare height: 100%;

Also, make sure you always use position: absolute; with a wrapper element set to position: relative; or your element will fly out in the wild which will eventually end up taking the viewport as the last relative wrapper if you set the position of the element using top, right, bottom or left.

I've explained here in detail, that how CSS Positioning Works

Worth to note that, you make any element a position: absolute; element, it will behave as a block level element, but you need to define height and width so for example, if you turn an inline span element a position: absolute; you can define height and width without making it display: block; (Unless and until you are using display: none; initially)

score 2 · Answer 2 · answered Jan 30 '14 at 14:00

2

position: absolute; does not behave the same as block elements.

You will need to set a width and a height for a div that is absolutely positioned.

answered Jan 30 '14 at 14:00

Stuart

1,168
3
10
17

niaccurshi · Answer 3 · 2014-02-02T12:47:51.357

This is fundamentally how position absolute works. Once taken out of the flow of the document it becomes an inline-block element that is absolutely positioned within the nearest element that is positioned relatively (or the top most element)

If you need it to then be a certain dimensions you can try to set widths and heights, or you can do things like

#inner {
    position: absolute;
    left: 0; 
    right: 0;
}

...which would ensure it always stuck to the left and right sides of the screen.

It's generally good practice to put things that are positioned absolutely inside of an element with "position:relative" on it, as your code stands it suggests you want your #inner element to be placed anywhere on the page, whereas if you wanted it to be of a size and position relative to #container your code should look like this:

<body>

    <div id="container">
        Container
        <div id="inner">Inner</div>
    </div>

</body>

with CSS such as:

#container {
    position: relative;
}

score 0 · Answer 4 · answered Jan 30 '14 at 14:02

0

  #inner {
    background-color:#ffd800; width:500px;
    height:500px;
    position:relative;
    }

You can see your output here:- http://jsfiddle.net/KggJd/

answered Jan 30 '14 at 14:02

user2804021

151
5

score 0 · Answer 5 · answered Jan 30 '14 at 14:05

Let me explain a little:

Postition: relative

This will align itself in accordance with the elements found before (i.e) Prior Siblings. You can change the position by using margin-top, margin-left, ....

Position: absolute

This will always consider from the browser's start point and won't be in accordance with anything.

Drawbacks:

You cannot consider this as the parent or anything when absolutely positioned.

You can change its position by using top, bottom, right, left.

DIV changed its behaviour when "position:absolute" was added to it. Why?

5 Answers5