CODEWITHSUNDEEP
htmlcss
Mia
Mia

Reputation: 6531

Nested DIV's and z-index

I'm trying to create this type of an overlapping by using z-index on divs:

Nested DIV's and z-index

However, if I set the z-index of the parent to a smaller number than z-index of the "non-child" element, the child stays at the back with it's parent too. I'm wondering if there is any way to overcome this issue..

Upvotes: 3

Views: 8548

Answers (1)

Tiago César Oliveira
Tiago César Oliveira

Reputation: 810

It's hard to tell without seeing your code, but I believe you are using some of the DIVs as ancestors; try to use all of them separately. That example does what you want:

<!DOCTYPE html>
<html>
    <head>
        <title>Positioning test</title>
        <style>
            div { position: absolute; width: 100px; height: 100px; color: #fff; text-align: center; }

            #parent { z-index: 1; background-color: red; left: 100px; top: 20px; }
            #not-child { z-index: 2; background-color: green; left: 140px; top: 40px; }
            #child { z-index: 3; background-color: blue;  left: 70px; top: 60px; }
        </style>
    </head>
    <body>
        <div id="parent">Parent</div>
        <div id="not-child">Not-child</div>
        <div id="child">Child</div>
    </body>
</html>

Upvotes: 1

Related Questions