z-index ne fonctionne pas

Pourquoi l'article avec l'index z 410 (# imgth_1) est affiché sous l'article avec l'index z 130 (# imgth_2)? Comment il ressemble vous pouvez voir ici: Exemple est https://typejoy.biz/dev/cssBasicNav33/en/mandalaNav#imgth_1 z-index ne fonctionne pas

J'ai trouvé que vous pouvez appliquer z-index uniquement pour les éléments avec un positionnement absolu, relatif ou fixe. L'exemple est en absolu, mais j'ai essayé aussi le positionnement fixe.

<!-- 
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>

Source

2017-08-27 olga

a.aThumbCl durée img suppose que la durée est un enfant IMG au lieu de relation de frères et soeurs en tant que telle ne peut pas lire la durée, pensez à utiliser la durée a.aThumbCl à la place ou a.aThumbCl img> span (désolé je ne suis pas avec mon système pour confirmer) – adeguk

Je pense que cela a plus à voir avec l'imbrication de votre balisage qu'avec un problème avec z-index. Étant donné le même niveau d'imbrication, z-index joue un rôle IMO. – 82Tuskers

La raison est que les feuilles étaient contexte distinct par rapport à grande image à l'intérieur eux, ainsi grande image dans l'un congé ne pouvait pas se chevaucher l'autre congé.

J'ai trouvé une explication détaillée ici: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

La solution a été

1) pour enlever

2) pour enlever

3) pour ajouter des classes de congé pour

Cette simplifie également la transformation, car je n'ai pas besoin de relater la grande image.

Le code est ici:

<style> 

* { 
    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); 
} 


/* Navigation */ 
    a.aThumbCl, a.aThumbCl img { 
     display : block; 
     width : 250px; height: 250px; 
    } 


    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 #large-leave-two { z-index: -100; border: 1px solid red; } 
    #imgth_2:target #large-leave-one { z-index: -100; border: 1px solid red; } 


    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 } 

</style> 




<span class="leavesCont"> 

      <a href="#imgth_1" class="aThumbCl large leave one" >  
      <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 --> 


         <a href="#page" class="stendClose lb-close">x Close</a> 

       </div> 
      </div> 

      <!-- simle a with text <a href="#imgth_2" class="aThumbCl" >4</a> --> 
      <a href="#imgth_2" class="aThumbCl large leave two" >  
      <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 --> 

         <a href="#page" class="stendClose lb-close">x Close</a> 

       </div> 
      </div> 


</span>

Source

2017-08-27 17:08:53 olga

z-index ne fonctionne pas

Répondre

Questions connexes