CODEWITHSUNDEEP
javascripthtmlcssz-index
denicio
denicio

Reputation: 562

Can't set z-index via CSS

<html>
<head>
    <title>Sample</title>

    <script>
        window.onload = function()
        {
            alert(document.getElementById('div1').style.zIndex);
            alert(document.getElementById('div2').style.zIndex);
        }
    </script>

    <style type="text/css" media="screen">
        #div2
        {
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="div1" style="z-index:1"></div>
    <div id="div2"></div>
</body>

The outcome of the above code is "1" for the 1st alert, and nothing for the 2nd.

How come i can't set the z-index of "div2" via CSS?

Thanks.

Upvotes: 3

Views: 2612

Answers (3)

Quentin
Quentin

Reputation: 943591

The .style.* set of properties map directly on to properties set via the style attribute, not those which are cascaded from a proper stylesheet.

To find the computed z-index, you need to use getComputedStyle

Upvotes: 1

Dr.Molle
Dr.Molle

Reputation: 117334

1: it is set, but JS cant determine it if it's not set inline
2: it would'nt have any effect, if the object is not positioned(as gulbrandr posted)

regarding to 1. If it's not set inline(or by javascript), you can retrieve it using currentStyle or getComputedStyle what gives you the currently applied style.

Upvotes: 3

gulbrandr
gulbrandr

Reputation: 1013

From W3Schools.com:

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)

Upvotes: 2

Related Questions