Can you position a child element (C) beneath its parent (B), but above B's neighboring element (D)?
Explaining this can be tricky, so feel free to check out an example here.
The main question is: how do you place the blue div.inner above the red div.neighbor, but still under the green div.outer?
Here's an illustration of the setup:
HTML structure:
<div class="neighbor"> </div>
<div class="outer">
<div class="inner"></div>
</div>
CSS styling:
.neighbor{
background-color: red;
height: 500px;
width: 500px;
}
.outer{
background-color: green;
width: 300px;
height: 300px;
position: fixed;
top: 0px;
left: 0px;
}
.inner{
background-color: blue;
width: 100px;
height: 100px;
position: fixed;
top: 0px;
left:250px;
}