I was faced with a coding dilemma that I couldn't quite figure out. The title may not give much away, but the issue lies within this code snippet:
https://jsfiddle.net/bnh3487n/
div {
width: 100%;
}
#wrapper {
width: 500px;
height: 500px;
position: relative;
}
#one {
height: 200px;
background-color: red;
position: absolute;
z-index: -1;
}
#sub {
height: 50px;
background-color: green;
position: absolute;
z-index: 3;
}
#two {
height: 200px;
width: 300px;
background-color: blue;
margin: 0px auto;
}
I'm trying to find a way for the green div to be in front of the blue one while remaining a child element of the red div. So far, setting the z-index to 3 hasn't been effective, and I'm struggling to come up with a solution;