Why item with z-index 410 (#imgth_1) is displayed below the item with z-index 130 ( #imgth_2 ) ? How it looks you can see here : Example is https://typejoy.biz/dev/cssBasicNav33/en/mandalaNav#imgth_1
I found that you can apply z-index only for items with absolute, relative or fixed positioning. The example is in absolute, but i have tried also fixed positioning.
<!--
z-index 100 .leavesCont
z-index 105 .large leave one
z-index 110 .pItemWrap
z-index 130 a.aThumbCl img
z-index 140 a.aThumbCl img span
z-index 150 a.aThumbCl
z-index 300 div.stendOverLay
z-index 310 div.stendOverLayWrapIn
z-index 410 div.stendOverLay div.stendOverLayWrapIn img
z-index 450 div.stendOverLay div.stendOverLayWrapIn div.stendClose
-->
* {
box-sizing: border-box;
}
span.leavesCont {
display: block;
height: 20em;
left: calc(50% - 10em);
position: absolute;
top: calc(50% - 10em);
width: 20em;
}
.leave {
border-top: 0.1em solid rgba(255, 255, 255, 0.4);
height: 12.5em;
position: absolute;
width: 6.5em;
/*overflow: hidden;*/
border-radius: 50%;
box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5);
left: calc(50% - 6.25em);
top: calc(50% - 12.5em);
transform-origin: 50% 12.5em;
}
.one {
background: rgba(16, 63, 236, 0.75);
transform: rotateZ(225deg);
}
.two {
background: rgba(37, 172, 162, 0.75);
transform: rotateZ(180deg);
}
div.pItemWrap {
position : relative;
}
/* better float left */
div.pItemWrap div.navTWrap {
display: flex; flex-direction:row; flex-wrap: wrap;
align-items: center; justify-content: space-between;
}
div.pItemWrap div.stendOverLay {
position : absolute;
width:100vw !important; height:100vh !important;
left:0px; top:0px;
background : blue;
}
div.stendOverLayWrapIn {
position : relative;
}
div.pItemWrap div.stendOverLay div.stendOverLayWrapIn img {
position : absolute;
display:block;
left:50px; top:50px;
width:700px; height:700px;
}
div.stendOverLay div.stendOverLayWrapIn a.stendClose {
position : absolute;
display:block;
left:250px; top:250px;
}
div.pItemWrap div.stendOverLay:target { display: block; width:auto; height:auto; }
#imgth_1:target { transform: rotateZ(-225deg); }
#imgth_2:target { transform: rotateZ(-180deg); }
div.pItemWrap div.stendOverLay {
display: none;
}
.leavesCont { z-index : 100 }
.large.leave { z-index : 105 }
.pItemWrap { z-index : 110 }
a.aThumbCl img { z-index : 130 }
a.aThumbCl img span { z-index : 140 }
a.aThumbCl { z-index : 150 }
div.stendOverLay { z-index : 300 }
div.stendOverLayWrapIn { z-index : 310 }
div.stendOverLay div.stendOverLayWrapIn img { z-index : 410 }
div.stendOverLay div.stendOverLayWrapIn a.stendClose { z-index : 450 } <span class="leavesCont">
<div class="large leave one" id="large-leave-one">
<div class="pItemWrap" >
<!-- simle a with text <a href="#imgth_1" class="aThumbCl" >4</a> -->
<a href="#imgth_1" class="aThumbCl" >
<img src="<?php echo BASE_PUBLIC_IMG . "aboutMe/redphp/dreamstime_xxl_88755164_300_30_c1_.jpg"; ?>" alt="image 1" >
<span class="thumbTitle" id="thumbTitle_4" >Title image-1</span>
</a>
<div class="stendOverLay lb-overlay" id="imgth_1">
<div class="stendOverLayWrapIn" >
<div class="test" > TEST </div>
<img class="m100n50"
src="aboutMe/redphp/dreamstime_xxl_88755164_300_30_c1_.jpg"
sizes="(max-width: <?php echo $vdArr["$mediaWidth_2t"]; ?>) 50vw, 25vw"
srcset="<?php echo BASE_PUBLIC_IMG . "aboutMe/redphp/dreamstime_xxl_88755164_300_30_c1_.jpg"; ?> 200w,
<?php echo BASE_PUBLIC_IMG . "aboutMe/redphp/dreamstime_xxl_88755164_560_30.jpg"; ?> 400w,
<?php echo BASE_PUBLIC_IMG . "aboutMe/redphp/dreamstime_xxl_88755164_900_30.jpg"; ?> 600w "
alt="image01"
/><!-- img of large window -->
<!-- clicking ny anchor the clost he large window and any other effect from anchors. In radios - only if the same name. In checkboxes - does not affect - you have to clikck the same checkbox -->
<a href="#page" class="stendClose lb-close">x Close</a>
</div>
</div>
</div>
</div>
<div class="large leave two">
<div class="pItemWrap" >
<!-- simle a with text <a href="#imgth_2" class="aThumbCl" >4</a> -->
<a href="#imgth_2" class="aThumbCl" >
<img src="<?php echo BASE_PUBLIC_IMG . "aboutMe/redphp/dreamstime_xxl_88755164_300_30_c1_.jpg"; ?>" alt="image 2" >
<span class="thumbTitle" id="thumbTitle_2" >Title image-2</span>
</a>
<div class="stendOverLay lb-overlay" id="imgth_2">
<div class="stendOverLayWrapIn" >
<div class="test" > TEST </div>
<img class="m100n50"
src="aboutMe/redphp/dreamstime_xxl_88755164_300_30_c1_.jpg"
sizes="(max-width: <?php echo $vdArr["$mediaWidth_2t"]; ?>) 50vw, 25vw"
srcset="<?php echo BASE_PUBLIC_IMG . "aboutMe/redphp/dreamstime_xxl_88755164_300_30_c1_.jpg"; ?> 200w,
<?php echo BASE_PUBLIC_IMG . "aboutMe/redphp/dreamstime_xxl_88755164_560_30.jpg"; ?> 400w,
<?php echo BASE_PUBLIC_IMG . "aboutMe/redphp/dreamstime_xxl_88755164_900_30.jpg"; ?> 600w "
alt="image02"
/><!-- img of large window -->
<!-- clicking ny anchor the clost he large window and any other effect from anchors. In radios - only if the same name. In checkboxes - does not affect - you have to clikck the same checkbox -->
<a href="#page" class="stendClose lb-close">x Close</a>
</div>
</div>
</div>
</div>
</span>
The reason was that leaves were separate context compared to large picture inside them, thus large picture in the one leave could not overlap the other leave.
I found detailed explanation here : https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
The solution was
1)to remove
2)to remove
3) to add leave classes to
This also simplifies transformation, because i do not need to rerotate the large image.
The code is here :