Kevin Aartsen Kevin Aartsen - 1 year ago 54
CSS Question

Child div with high z-index not workin

I have 3 divs set up like this:

<div id="1">
<div id="2">
<div id ="3">

Div 1 has a higher z-index than div 2 but div 3 has a higher z-index than all of them. Somehow div 3 still appears behind div 1. Is this because its a child of a div with a lower z-index than the div above?
And how can i solve this.

Answer Source

Just add position: relative; to your #text div like this:

#text {
    color: red;
    z-index: 10;
    background: transparent;
    position: relative;

Link to jsFiddle: