Entfernen überlaufbaren anklickbaren Bereich

Question

Ich habe eine Navbar mit einer bestimmten Höhe und ein Logo, das überläuft. Dieses Logo ist natürlich anklickbar, aber es bedeutet, dass der Teil, der überläuft, auch anklickbar ist.

Ist es möglich, das Logo überlaufen zu lassen, aber nicht den anklickbaren Bereich?

HTML

<nav> 
    <a href="#"> 
    <div class="logo"> 
     <img src="http://i.imgur.com/h4bUdrZ.png" /> 
    </div> 
    </a> 
</nav> 

CSS

body, html { 
    padding: 0; 
    margin: 0; 
} 

nav { 
    height: 100px; 
    background: blue; 
    position: relative; 
} 

.logo { 
    position: absolute; 
    top: -36px; 
    left: -39px; 
} 

JSFIDDLE

Answer 1

So etwas wie das?

body, 
 
html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav { 
 
    height: 100px; 
 
    background: blue; 
 
    position: relative; 
 
} 
 

 
a { 
 
    display: inline-block; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.logo { 
 
    position: absolute; 
 
    top: -36px; 
 
    left: -39px; 
 
    pointer-events: none; 
 
}

<nav> 
 
    <a href="#"> 
 
    <div class="logo"> 
 
     <img src="http://i.imgur.com/h4bUdrZ.png" /> 
 
    </div> 
 
    </a> 
 
</nav>

Answer 2

Nur Logo außerhalb Ihres Link bewegen und den Link auf Rest-Header setzen:

body, 
 
html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
nav { 
 
    height: 100px; 
 
    background: blue; 
 
    position: relative; 
 
} 
 
.logo { 
 
    position: absolute; 
 
    top: -36px; 
 
    left: -39px; 
 
} 
 
a { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 10; 
 
    display: inline-block; 
 
}

<nav> 
 
    <a href="#"> 
 
    </a> 
 

 
    <div class="logo"> 
 
    <img src="http://i.imgur.com/h4bUdrZ.png" /> 
 
    </div> 
 
</nav>

Answer 3

Stellen Sie das ganze div innen die a.

Platzieren Sie den Link nach dem Bild, geben Sie ihm absolute Position und stellen Sie die Position und Größe sorgfältig ein.

Die anderen Antworten machen die ganze Überschrift anklickbar. Wenn dies nicht gewünscht ist, verwenden Sie diese Lösung. Möglicherweise müssen Sie die Breite des anklickbaren Bereichs anpassen.

Siehe nachstehendes Beispiel:

body, html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav { 
 
    height: 100px; 
 
    background: blue; 
 
    position: relative; 
 
} 
 

 
.logo { 
 
    position: absolute; 
 
    top: -36px; 
 
    left: -39px; 
 
} 
 

 
a.clickable-logo { 
 
    position: absolute; 
 
    display: inline-block; 
 
    left: 36px; 
 
    top: 36px; 
 
    width: 600px; 
 
    height: 100px; 
 
}

<nav> 
 
    <div class="logo"> 
 
     <img src="http://i.imgur.com/h4bUdrZ.png" /> 
 
     <a href="#" class="clickable-logo"> 
 
     </a> 
 
    </div> 
 
</nav>

Answer 4

ändern wenig Sie Struktur.

Setzen Sie <a> unabhängig und übergeben Sie den Link darin mit folgenden CSS.

HTML

<nav> 
    <a href="#"></a> 
    <div class="logo"> 
     <img src="http://i.imgur.com/h4bUdrZ.png" /> 
    </div> 
</nav> 

CSS

body, html { 
    padding: 0; 
    margin: 0; 
} 

nav { 
    height: 100px; 
    background: blue; 
    position: relative; 
} 
nav a{ 
    position: relative; 
    display: block; 
    height: 100%; 
    z-index: 1; 
} 

.logo { 
    position: absolute; 
    top: -36px; 
    left: -39px; 
} 

Beispiel: https://jsfiddle.net/67s4ajqf/3/

Answer 5

Was ist so etwas wie das?

HTML

<a href="#"> 
    <div class="clear"> 
</div> 
</a> 
<nav> 
    <div class="logo"> 
    <img src="http://i.imgur.com/h4bUdrZ.png" /> 
    </div> 
</nav> 

CSS

body, html { 
    padding: 0; 
    margin: 0; 
} 

nav { 
    height: 100px; 
    background: blue; 
    position: relative; 
} 
.clear { 
    height: 100px; 
    background: 0; 
    position: absolute; 
    width: 100%; 
    z-index: 2; 
} 

.logo { 
    position: absolute; 
    top: -36px; 
    left: -39px; 
}