CODEWITHSUNDEEP
htmlcss
Guilherme Longo
Guilherme Longo

Reputation: 2308

percentage values for absolute elements refers to browser width and height?

As far as I know, when using css percentage for properties value for an relative element, this element checks the value of its parent and adjust the size based on this parent size.

What is the scenario for absolute elements? I was looking through a css file and I found this:

html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

Is this ok to have percentage on absolute elements to get its browser width and height?

Upvotes: 3

Views: 755

Answers (1)

ATOzTOA
ATOzTOA

Reputation: 35950

When an element has position:absolute, the width and height percentages are calculated based on the whole browser dimensions.

See below code:

<html>
    <head>
        <style>
            #a {
                position: absolute;
                width:50%;
            }
        </style>

    </head>
    <body onload="alert(document.getElementById('a').offsetWidth);">
        <div style="width:200px;">
            <div id="a">Hello</div>
        </div>
    </body>
</html>

Even though the width of parent div is only 200px, the element displays half of the browser width.

Once I change it to position:relative;, the alert will say 100.

Upvotes: 3

Related Questions