Geek Answers Handbook

Does the absolute position affect the width?

I am new to css. I am wondering why, when I change the position of a div element to absolute, does the width of the div element change? Tried this on Chrome v25.0.1364.172m and IE9, both have the same result.

A 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>
+13
source share
2 answers

Since absolutely positioned elements do not behave like the level of a block of elements and do not flow one after another, as usual, a <div>.

You will need to set the width and height for the div, which is absolutely positioned, depending on what it contains.

Your absolutely positioned element will be located relative to the first parent element in which it is located. So a simple example:

'gotcha' 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>
+23

, , .

0

More articles:


All Articles