23

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:

<!doctype html/>
<html>
<head>
    <title>test</title>
    <style>
        div {
            position:relative;
            border-width: 1px;
            border-style: solid;
            border-color: black;
        }
    </style>
</head>
<body>
    <div>test</div>
</body>
</html>
lee23
  • 409
  • 1
  • 3
  • 10

3 Answers3

35

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>
SMacFadyen
  • 3,145
  • 2
  • 25
  • 37
  • 2
    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? – lee23 Apr 02 '13 at 12:32
  • 1
    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. – SMacFadyen Apr 02 '13 at 14:00
  • 20
    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](http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo) very clearly states that absposed elements *are* block-level. – BoltClock Feb 10 '16 at 08:38
  • 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* . – Arun Ramachandran Feb 12 '18 at 13:43
  • @BoltClock You closed https://stackoverflow.com/questions/31398209/does-adding-a-position-absolute-to-a-block-element-make-it-behave-like-an-inlin , isn't it a valid question? – Suraj Jain Apr 10 '18 at 05:26
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.

Tiagojdferreira
  • 1,122
  • 2
  • 14
  • 20
0

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

Aladdin Ahmed Muhammad
  • 1
  • 2