Lien non cliquable en raison de l'index-z

Question

J'ai donc reçu un emballage avec position:relative. Au-dessus de cette enveloppe, il y a un logo avec position:fixed. Ce logo est à mi-chemin de l'emballage. Comme j'ai utilisé la marge pour réduire un peu l'encapsulation, je ne peux pas cliquer sur le lien du logo.

L'index z du logo est inférieur à celui de l'emballage. C'est censé être comme ça. Le logo ne doit pas être devant l'emballage. Puis-je en quelque sorte rendre le lien sur le logo cliquable sans l'amener devant l'emballage?

Un peu JS-violon ci-dessous :)

.content { 
 
\t -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75); 
 
\t -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75); 
 
\t box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75); 
 
\t background-color: #fff; 
 
\t width: calc(100% - 100px); 
 
\t margin: 70px auto 280px auto; 
 
    height:1000px; 
 
\t position: relative; 
 
\t z-index: 10; 
 
} 
 

 
.inner-container { 
 
\t position: relative; 
 
\t width: 100%; 
 
\t display: table; 
 
} 
 

 
#logo{ 
 
    width:100px; 
 
    height:100px; 
 
    margin-left:calc(50% - 50px); 
 
    position:fixed; 
 
    border-radius:50%; 
 
    background-color:black; 
 
}

<a href="#"> 
 
    <div id="logo"></div> 
 
</a> 
 
<div class="inner-container"> 
 
    <div class="content"> 
 
    </div> 
 
</div>

Answer 1

définir la psition de #logo-top:0px .Add margin-top:70px au .inner-container et mis en retirer la marge supérieure de .content

.content { 
 
\t -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75); 
 
\t -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75); 
 
\t box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75); 
 
\t background-color: #fff; 
 
\t width: calc(100% - 100px); 
 
\t margin: 0px auto 280px auto; 
 
    height:1000px; 
 
\t position: relative; 
 
\t z-index: 10; 
 
} 
 

 
.inner-container { 
 
\t position: relative; 
 
\t width: 100%; 
 
\t display: table; 
 
    margin-top:70px; 
 
} 
 

 
#logo{ 
 
    width:100px; 
 
    height:100px; 
 
    margin-left:calc(50% - 50px); 
 
    position:fixed; 
 
    border-radius:50%; 
 
    background-color:black; 
 
    top:0px; 
 
}

<a href="#" onclick="alert('here')"> 
 
    <div id="logo"></div> 
 
</a> 
 
<div class="inner-container"> 
 
    <div class="content"> 
 
    </div> 
 
</div>

Answer 2

Remplacez le boîtier de style ci-dessous.

body{ 
    margin-top: 70px; /* ADD THE MARGIN TOP IN THE BODY TAG */ 
    margin-botton: 280px; /* ADD THE MARGIN BOTTOM IN THE BODY TAG */ 
} 
.content { 
    -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75); 
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75); 
    background-color: #fff; 
    width: calc(100% - 100px); 
    margin: 0 auto 0 auto;/* MAKE MARGIN TOP AND BOTTOM TO ZERO AND ADD THE MARGIN TOP AND BOTTOM IN THE BODY TAG */ 
    height:1000px; 
    position: relative; 
    z-index: 10; 
} 

.inner-container { 
    position: relative; 
    width: 100%; 
    display: table; 
} 

#logo{ 
    width:100px; 
    height:100px; 
    margin-left:calc(50% - 50px); 
    position:fixed; 
    border-radius:50%; 
    background-color:black; 
    top:0; /* ADD TOP AS ZERO, TO POSITION THE LOG ELEMENT FROM TOP*/ 
}