リンクをカバーしている画像

Question

私は次のようなものがあります。私はちょうどサイトにロゴを追加しました。何らかの理由でロゴ/画像の右側にあるナビゲーションパネルのリンクがクリックできなくなりました。画像がどうにかして過剰撮影されているように見えますが、私はどのように見えません。コンソールで、画像を見てもそれを見過ごしていませんか？

これはなぜ起こっているのですか？画像のz屈折率は、リンクのz屈折率未満であること

.header { 
 
\t margin: 0; 
 
\t background-color: rgba(0,0,0,0); 
 
\t height: 80px; 
 
\t z-index: 9999; 
 
\t position: absolute;/*test*/ 
 
\t width: 100%; 
 
} 
 
.header_wrap { 
 
\t margin: 0 4%; 
 
\t padding: 2% 0 0 0; 
 
} 
 
.logo { 
 
\t position: absolute; 
 
\t margin-top: -15px; 
 
\t cursor: pointer; 
 
} 
 
.logo-img { 
 
\t /*height: 75px; 
 
\t width: auto;*/ 
 
\t height: auto; 
 
\t width: 25%; 
 
} 
 
.logo a { 
 
\t color: #000; 
 
\t text-decoration: none; 
 
} 
 
.nav-list { 
 
\t margin: 0; 
 
\t list-style: none; 
 
\t text-align: right; 
 
\t width: 100%; 
 
\t padding: 0; 
 
} 
 
.nav-list > a { 
 
\t display: inline-block; 
 
\t padding: 0px 15px; 
 
\t text-decoration: none; 
 
} 
 
.nav-list > a > li { 
 
\t text-decoration: none; 
 
\t font-size: 1.2em; 
 
\t color: #000; 
 
} 
 
.nav-list > a > li:hover { 
 
\t color: #3f3f3f; 
 
}

<header class="header"> 
 
    <div class="header_wrap"> 
 
     <div class="logo"><a href="/"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></a></div> 
 
     <ul class="nav-list"> 
 
      <a href="work"><li>WORK</li></a> 
 
      <a href="approach"><li>APPROACH</li></a> 
 
      <a href="services"><li>SERVICES</li></a> 
 
      <a href="discuss-project"><li>PROJECT</li></a> 
 
      <a href="contact"><li>CONTACT</li></a> 
 
     </ul> 
 
    </div> 
 
</header>

Answer 1

あなたがロゴにposition:absoluteを与えるが、.logoにz-index: -1;を追加する必要がありwhay私は理解していないがあなたのリンクのクリック可能になります。..

.header { 
 
\t margin: 0; 
 
\t background-color: rgba(0,0,0,0); 
 
\t height: 80px; 
 
\t z-index: 9999; 
 
\t position: absolute;/*test*/ 
 
\t width: 100%; 
 
} 
 
.header_wrap { 
 
\t margin: 0 4%; 
 
\t padding: 2% 0 0 0; 
 
} 
 
.logo { 
 
\t position: absolute; 
 
\t margin-top: -15px; 
 
\t cursor: pointer; 
 
    z-index: -1; 
 
} 
 
.logo-img { 
 
\t /*height: 75px; 
 
\t width: auto;*/ 
 
\t height: auto; 
 
\t width: 25%; 
 
} 
 
.logo a { 
 
\t color: #000; 
 
\t text-decoration: none; 
 
} 
 
.nav-list { 
 
\t margin: 0; 
 
\t list-style: none; 
 
\t text-align: right; 
 
\t width: 100%; 
 
\t padding: 0; 
 
} 
 
.nav-list > a { 
 
\t display: inline-block; 
 
\t padding: 0px 15px; 
 
\t text-decoration: none; 
 
} 
 
.nav-list > a > li { 
 
\t text-decoration: none; 
 
\t font-size: 1.2em; 
 
\t color: #000; 
 
} 
 
.nav-list > a > li:hover { 
 
\t color: #3f3f3f; 
 
}

<header class="header"> 
 
\t \t <div class="header_wrap"> 
 
\t \t \t <div class="logo"><a href="/"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></a></div> 
 
\t \t \t \t <ul class="nav-list"> 
 
\t \t \t \t \t <a href="work"><li>WORK</li></a> 
 
\t \t \t \t \t <a href="approach"><li>APPROACH</li></a> 
 
\t \t \t \t \t <a href="services"><li>SERVICES</li></a> 
 
\t \t \t \t \t <a href="discuss-project"><li>PROJECT</li></a> 
 
\t \t \t \t \t <a href="contact"><li>CONTACT</li></a> 
 
\t \t \t \t </ul> 
 
\t \t </div> 
 
\t </header>

編集：

他の解決策は、display: block;〜.logo aが効くでしょう。 Fiddle

Answer 2

チェック。

Answer 3

イメージはそれらを追い越していませんが、<div>イメージが座っています。それはあなたのnavbarの上に座って透明なdivを持っているので、全幅です。ロゴコンテナの幅を制限し、代わりにスパンを使用するか、提案としてフロートします。

Answer 4

実際にposition: absolute;を使用する必要はありません。代わりにdisplay:inlineまたはinline-blockを使用し、重複を避けてください。

あなたCSSは次のようになります。

.nav-list { 
    display:inline; /* Add this */ 
    margin: 0; 
    /* width:100%; you can remove this */ 
    list-style: none; 
    text-align: right; 
    padding: 0; 
} 

.logo { 
    display:inline; /* add this*/ 
    margin-top: -15px; 
    cursor: pointer; 
    /* z-index: -1; no need for z-index */ 
} 

JsFiddle