absolute position affects width?

css position width absolute

27,167

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>

27,167

lee23

Updated on July 28, 2022

Comments

lee23 almost 2 years
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>
```
- XTGX about 11 years
  
  have u applied width and height to the div in actuall code ?
- thgaskell about 11 years
  
  Changing the position to absolute triggers a block formatting context.
- lee23 about 11 years
  
  XTG, there is no other code.
- Petko Kostov almost 8 years
  
  You can check this answer here on that subject:
lee23 about 11 years

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?
SMacFadyen about 11 years

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.
BoltClock over 8 years

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.
Arun Ramachandran over 6 years

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 .
Suraj Jain about 6 years

@BoltClock You closed stackoverflow.com/questions/31398209/… , isn't it a valid question?
Henry Brewer over 5 years

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