Say I have the following HTML markup:
<div class="site-banner">
<div class="parent">
<div class="children-1">
some nice text
</div>
<div class="children-2">
<button>button</button>
</div>
</div>
<img class="building"/>
</div>
And say that id looks something like this:
Now what I want to happen, is when the user scroll down, the parent stays fixed and and the title/button will have that behavior:
So logically the CSS should be something like this:
.parent{
position: fixed;
}
.children-1{
position: relative;
z-index: 2;
}
.children-1{
position: relative;
z-index: 1;
}
.children-2{
position: relative;
z-index: 3;
}
But it doesn't work, the two children gets the z-index of the parent, if the parent have z-index of 4, then both the title and the button will be in front of the building, if the parent have z-index of 2, then both will be behind the building, I can't separate them.
One thing I did that worked is to separate the parent to two parents, so the button and the title will not have the same parent, and put z-index to the two parents. But I want the button position to be relative to the title, so it will always have the same distance below the title, and after separate them to two parents I had some mess in some resolution, I needed to set different top property to the button/title in a lot of resolutions.
Is there any way to achieve what I try to do, with one parent?
