Alright, I need some help with this code snippet:
<div id="carousel">
<div class="active"><img id="pic1" src="http://i.imgur.com/gWGqZly.png" /></div>
<div><img id="pic2" src="http://i.imgur.com/mC1FD81.png" /></div>
<div><img id="pic3" src="http://i.imgur.com/HFx9mqa.png" /></div>
</div>
The first div has the class "active" and that's the one I want to target. These divs are stacked on top of each other using position: absolute;
This is my CSS setup:
#carousel div {
position:absolute;
z-index: 0;
}
#carousel div.inactive {
z-index: 1;
}
#carousel div.active {
z-index: 2;
}
I'm attempting to assign a z-index of "2" to the first div with the class "active". The selector I thought would work is:
.active {
z-index: 2;
}
However, this doesn't seem to be effective as the image does not come to the front. Surprisingly, if I use this selector instead:
#carousel div.active {
z-index: 2;
}
It works perfectly.
This got me confused because aren't those two selectors essentially doing the same thing? What sets them apart in this scenario?
You can view a demo on jsfiddle https://jsfiddle.net/x1L4tfw4/5/. If you try removing the "#carousel div" part from the css selector, you'll notice the difference.