Nicht klickbares Element beim Einschränken der Seite

Question

Ich habe ein Problem mit meinem Exit-Seitenelement. Ich erstelle ein großes "X" auf der rechten Seite meiner Seite. Dies ist ein anklickbares Element zum Verlassen des aktuellen Inhalts.

Es gibt einen Code dieses Element:

.section-modal .close-modal { 
    position: fixed; 
    top: 25px; 
    right: 25px; 
    width: 75px; 
    height: 75px; 
    background-color: transparent; 
    cursor: pointer; 
} 

.section-modal .close-modal:hover { 
    opacity: .3; 
} 

.section-modal .close-modal .lr { 
    z-index: 1051; 
    width: 5px; 
    height: 75px; 
    margin-left: 35px; 
    background-color: #222; 
    -webkit-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

.section-modal .close-modal .lr .rl { 
    z-index: 1052; 
    width: 5px; 
    height: 75px; 
    background-color: #222; 
    -webkit-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 

ich auf der oberen Mitte der Seite ein Logo haben. Hier ist ein Code:

 <div class="close-modal" data-dismiss="modal"> 
     <div class="lr"> 
     <div class="rl"> 

     </div> 
     </div> 
     </div> 

     <div class="container"> 
     <div class="row"> 
      <div class="col-md-12 col-sm-12"> 
       <img src="img\Logo2.png" class="img-responsive" style="margin: 0 auto; z-index: -1" alt="..."> 

Wenn ich verengen die Seite, die ich „X“ in der Nähe von meinem Logo haben, aber ich kann nicht klicken und zurück zur Hauptseite. Ich kann diese Lösung nicht lösen. Bitte helfen Sie.

Wenn Sie weitere Informationen benötigen, sagen Sie mir bitte, dass ich eine Frage bearbeiten werde.

Answer 1

Es ist schwer zu sagen von Ihrem Code, aber ich vermute das Problem ist, dass das Logo die "X" -Taste überlappt. Um sicher zu gehen, klicken Sie mit der rechten Maustaste auf das "x" und wählen Sie "Element prüfen".

Wenn das Element Tab geöffnet wird, das sich auf die img-Tag und nicht auf das ‚x‘ dann ist das dein Problem, es zu lösen, geben Sie ihm einen z-index:.

.section-modal .close-modal { 
    position: fixed; 
    top: 25px; 
    right: 25px; 
    width: 75px; 
    height: 75px; 
    background-color: transparent; 
    cursor: pointer; 
    z-index: 100 
} 

Answer 2

Dies könnte ein Stapelkontextproblem.

Mehr Infos für ein vollständiges Verständnis von z-index Verhalten:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
• https://philipwalton.com/articles/what-no-one-told-you-about-z-index/