divが重複してリンクをクリックできません

Question

デザインに重複するdivがあり、リンクがクリックできません。私はリンクがクリックできない理由は、上記の重複するdivのためだと知っているので、いくつかのzインデックスを割り当てて試してみてください。しかし、私はリンクをクリック可能にすることができるのは、親div（実際に自分のテキストを収めているdivを含むもの）を最高のz-index要素にすることだけです。これは私のデザインと見た目を完全に破ります。私は気づいていない、これのまわりの別の方法がありますか？それとも、これは完全にデザインをやり直す必要があるのでしょうか？

The link to the journal skin I am working on.

私もそこbranchoverlay divの中に収納された側枝がhereを参照して、他のdivを少しオーバーラップすることを意図していることを言及して少し編集をスローします。私は彼らを自分のdivから削除してコンテンツ所有者のバックグラウンドに置く提案を聞いたことがあるが、それは私が思うその影響を壊すだろうか？負のマージンで重複することなくdivのわずかなオーバーレイを達成するためにヘッダ/ドロップダウン領域をフォーマットするより良い方法はありますか？

HTML：

<div class="text"><div class="body"> 
     <div class="menu"><div class="dropdowncontainer"><div class="dropdown"> 
    <span><img src="https://s18.postimg.org/i8xcnc8gp/home.png"></span> 
    <div class="dropdown-content"> 
    <a href="#">Bacon</a> 
    <a href="#">Ribs</a> 
    <a href="#">Steak</a> 
    </div> 
</div><div class="dropdown"> 
    <span><img src="https://s9.postimg.org/iw9covwu7/guide.png"></span> 
    <div class="dropdown-content"> 
     <a href="#">Bacon</a> 
     <a href="#">Ribs</a> 
     <a href="#">Steak</a> 
    </div> 
</div><div class="dropdown"> 
    <span><img src="https://s12.postimg.org/aa9pluszh/resources.png"></span> 
    <div class="dropdown-content"> 
    <a href="#">Bacon</a> 
    <a href="#">Ribs</a> 
    <a href="#">Steak</a> 
    </div> 
</div></div> 
</div><div class="branchoverlay"></div><div class="contentholder"> 
        <div class="maindiv"><p>Welcome and thank you for your interest in joining Hvalla, the following links have been provided for your convenience. 

<h3>Required Reading</h3> 
» <a href="http://hvalla.deviantart.com/journal/Group-Rules-621936986">The Rules</a> — While you are not expected to commit these to memory, they are a required read. 
» <a href="http://hvalla.deviantart.com/journal/Setting-and-World-Lore-623071331">Setting and World Lore</a> — An in-depth look at the world of Hvalla, from locations to the packs that inhabit it. 
» <a href="http://hvalla.deviantart.com/journal/Character-Creation-627655883">Character Creation</a> — All information pertaining to the creation of your character. 
» <a href="http://hvalla.deviantart.com/journal/How-to-Join-622339097">How to Join</a> — A detailed overview of the current joining process. 
» <a href="http://hvalla.deviantart.com/journal/Runestones-622318184">Currency</a> — An in-depth guide of Runestones and how to utilize them. 
» <a href="http://hvalla.deviantart.com/journal/FAQ-622340489">FAQ</a> — All frequently asked questions. 

<hr> 
<b>Core Concepts:</b> 
<ul><li><span>Hvalla is a semi-realistic wolf art and roleplay community. Our goal is to stretch the boundaries of realism in a tasteful way, encouraging a more mature form of creativity in wolf RP. </span></li></ul><ul><li><span>We strive to provide a community that is inclusive and close-knit; no one should ever feel excluded, railroaded or otherwise on the fringes of a clique of close friends.</span></li></ul><ul><li><span>Characters in Hvalla may exhibit humanized aspects such as facial expressions and verbal communication similar to media such as Princess Mononoke, </span><a href="https://youtu.be/GgGOcEgRh7k">The Jungle Book</a><span>, </span><a href="https://youtu.be/3h_nB089jrs">Savva</a><span> etc., but overall should exhibit realistic behavior. </span></li></ul><ul><li><span class="bbcode_bold">Hvalla explores themes that are ideologically sensitive in nature.</span><span> We are always excited to involve new members in the community, however, if you find the exploration of dark themes such as murder, war, pillaging, abuse etc., to be outside of your comfort zone or you find yourself easily offended by aforementioned subjects, Hvalla may not be the community for you. Remember, this is creative writing, not real life.</span> 
</li></ul></p></div></div> 

<div class="rockfooter"></div> </div></div> 

CSS：誰もが与えることができる任意のヘルプや提案のための

/*BODY*/ 

.gr-body { 
    background: url(http://orig14.deviantart.net/8b57/f/2016/279/f/5/frontpagebackground_by_wulfghast-dak5apt.jpg); 
    background-size: 100%; 
    background-repeat: no-repeat; 
    background-color: #1c1119; 
    color: #545454; 

} 

.gr-top{ 
    border: none; 
    margin: -5px 0px -10px 0px; 

} 

.gr-top img { 
    display: none; 

} 

h2 { 
    display: none; 

} 

.gr-top span { 
    display: none; 

} 

.tri { 
    display: none; 

} 

.gr1, .gr2, .gr3 { 
    display:none; 

} 
.bottom { 
    display: none; 

} 

.text { 
    margin-bottom: -38px; 
    padding: 0; 

} 

/*TEXT*/ 

p { 
    color: #3c281f; 
    font-family: 'montserrat', sans-serif; 
    font-size: 15px; 
    line-height: 1.4; 
    margin: 20px; 

} 

/*MENU AREA*/ 

.menu { 
    width: 64%; 
    height: 171px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 18%; 
    padding-left: 10%; 
    background: url('http://s15.postimg.org/zby726h7v/header.png'); 
    background-repeat: no-repeat; 
    background-position: top-center; 
    background-size: 100% 70%; 
    position: relative; 
    z-index: 3; 

} 

.branchoverlay { 
    width: 74%; 
    height: 694px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: -53px; 
    background: url('http://s15.postimg.org/n6ayvyzrd/branchoverlay.png'); 
    background-repeat: no-repeat; 
    background-position: top-center; 
    background-size: 100% 70%; 
    position: relative; 
    z-index: 2; 

} 

.dropdowncontainer { 
    height: 30px; 
    width: 70%; 
    margin-left: auto; 
    margin-right: auto; 

} 

.dropdown { 
    position: relative; 
    display: inline-block; 
    width: 23%; 
    text-align: center; 
    margin-top: 30px; 

} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #4a463b; 
    min-width: 120px; 
    padding-bottom: 20px; 

} 

.dropdown-content a { 
    color: #ffffff; 
    line-height: 2.5; 

} 

.dropdown-content a:hover { 
    color: #000000; 

} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

/*CONTENT*/ 

.contentholder { 
    width: 68%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: -735px; 
    -moz-box-shadow: 0 20px 20px 5px #0a0a0a; 
    -webkit-box-shadow: 0 20px 20px 5px #0a0a0a; 
    box-shadow: 0 20px 20px 5px #0a0a0a; 
    background-color: #50463b; 
    position: relative; 
    z-index: 1; 
} 

.maindiv { 
    width: 85%; 
    margin-top: 4%; 
    margin-left: 5%; 
    margin-bottom: 400px; 
    position: relative; 
    z-index: 5; 
    padding: 20px 20px 20px 20px; 
    display: inline-block; 
} 

/*FOOTER*/ 

.rockfooter { 
    background: url(http://s17.postimg.org/is79jxd3z/footer3_by_wulfghast_dakd92b_1.png); 
    height: 1000px; 
    width: 100%; 
    background-position: bottom; 
    background-repeat: no-repeat; 
    background-size: contain; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: -1100px; 
    position: relative; 
    z-index: 4; 
} 

/*RESPONSIVE MOBILE*/ 

.da-media[mobile] .menu { 
    width: 74%; 
    padding-left: 0%; 

} 

.da-media[mobile] .dropdown { 
    margin-top: 35px; 
    width: 31%; 

} 

.da-media[mobile] .maindiv { 
    margin-left: 1%; 
} 

.da-media[mobile] .rockfooter { 
    margin-top: -1300px; 
} 

ありがとう！

Answer 1

あなたは前にあなたのdivは1にそれを作ってみたり、margin-top

body div#devskin13122897 .rockfooter { 
     background: url(http://s17.postimg.org/is79jxd3z/footer3_by_wulfghast_dakd92b_1.png); 
     height: 1000px; 
     width: 100%; 
     background-position: bottom; 
     background-repeat: no-repeat; 
     background-size: contain; 
     margin-left: auto; 
     margin-right: auto; 
     margin-top: -1100px; 
     position: relative; 
     z-index: 1; 

Answer 2

を削除する原因となっz-index:4を得ただけで、背景画像を保持し、contentholderクラス

に画像を追加するために使用されるbranchoverlay div要素を削除してください

背景：＃50463b url（http://s15.postimg.org/n6ayvyzrd/branchoverlay.png）;

このURLを確認してください：jsfiddle.net/pfayap45