absolute position affects width?

Question

I am new to css. I am wondering why when I change the positioning of the div element to absolute, the width of the div element changes? Tried it out in Chrome v25.0.1364.172m and IE9, both have the same outcome.

Simple example:

div {
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

<div>test</div>

Coercion

have u applied width and height to the div in actuall code ? – Witha

Changing the position to absolute triggers a block formatting context. – Siloa

XTG, there is no other code. – Coercion

You can check this answer here on that subject: – Uranology

Answer 1

Because absolutely positioned elements do not behave as block level elements and do not flow after each other like normal a<div>does.

You will need to set a width and a height for a div that is absolutely positioned, depending what it contains.

Your absolutely positioned element will position relative to the first parent element it is in. So, a simple example:

A simple 'gotcha' is not setting the parent element to have position: relative;

<!-- I'm a parent element -->
<div style="width: 500px; height: 500px; position: relative; border: 1px solid blue;">

    <!-- I'm a child of the above parent element -->
    <div style="width: 150px; height: 150px; position: absolute; left: 10px; top: 10px; border: 1px solid red;">
         I'm positioned absolutely to my parent. 
    </div>

</div>

Whitethorn

Sorry, but I still don't understand any of the replies. Doesn't positioning mean where to place an element, so why does it affect the width? – Coercion

If your element is a block level element then it will fill the parent based on it's contents. So, if you had lots of paragraph text inside a normal div, the paragraph text would decide the size of the div based on your CSS Styles. Absolute positioning isn't block level, so it doesn't do that. – Whitethorn

The quoted text appears to be made up. No citation is provided, the text doesn't appear anywhere else (at least not on the web), and for that matter, the first half is patently false. The spec very clearly states that absposed elements are block-level. – Exert

I got confused by the same problem. Thanks for providing the better clarification regarding the same. Same scenario is applicable for "Position: fixed" ? I found the same behaviour while trying to change the position attribute to fixed . – Chuchuah

@Exert You closed #31398709 , isn't it a valid question? – Kalin

Answer 2

Like SMacFadyen said, the most likely cause is missing position relative in the container. However, if the container is in position relative and has a small width and the inner content in absolute, when you position the inner content using left or right its content might break into multiple lines. In this scenario you will want to change the white-space property to nowrap or some other option that better suits your needs.

Schizont

Answer 3

Because the element, which you give absolute position take the width from his parent and didn't behave as a block element.

License

It takes the width and height from its content. And only when the content is relatively positioned. – Boucicault