CODEWITHSUNDEEP
htmlcss
meadisu
meadisu

Reputation: 204

Can I position a grandchild div behind grandparent div?

Trying to get a sub drawer to slide out from a left hand navigation drawer on a webpage. However it is structured the the sub drawer is a grandchild of the grandparent div. Is it possible to position the sub drawer behind the grandparent drawer?

For example, in this fiddle, can I position "c" behind "a" without changing the structure of the html? CSS-only basically.

http://jsfiddle.net/ZmvKX/32/

HTML structure:

<div id="a">
    <div id="b">
       <div id="c">
       </div>
    </div>
</div>

Upvotes: 2

Views: 698

Answers (1)

RyanS
RyanS

Reputation: 637

Set a negative z-index for the child, #c; and remove the one set on the parent, #a.

HTML:

<div id="a">
    <div id="b">
        <div id="c">
        </div>
    </div>
</div>

CSS:

#a {
    width: 300px; 
    height: 500px; 
    border: 1px solid black; 
    background-color: #000;
}

#b { 
    width: 300px; 
    height: 100px; 
    border: 1px solid black; 
    padding: 10px 10px; 
    top: 100px; 
    left: 100px; 
    background-color: #ff0; 
}

#c { 
    width: 400px; 
    height: 200px; 
    border: 1px solid black;  
    background-color: #fff;
    position: fixed; z-index: -2; 
}

http://jsfiddle.net/ZmvKX/35/

Upvotes: 3

Related Questions