我的设计中有一些重叠的 div，我的链接不可点击。我知道链接不可点击的原因是因为 div 重叠，所以我分配了一些 z-indexes 来尝试解决这个问题。但是，我注意到我只能通过使父 div(包含实际包含我的文本的 div 的那个)成为最高的 z-index 元素来使链接可点击……这完全破坏了我的设计和它的外观。有没有我没有注意到的不同方法？或者这是必须完全重做设计的情况吗？
The link to the journal skin I am working on.
我还想在其中进行一些编辑，提到 branchoverlay div 中的侧分支旨在与其他 div 重叠一点，请参见 here .我听说过将它们从它们自己的 div 中删除并将它们放在 contentholder 的背景中的建议，但我认为这会破坏这种效果吗？有没有更好的方法来格式化标题/下拉区域以实现 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;
}
感谢任何人可以提供的任何帮助和建议!
最佳答案
你有 z-index:4 导致你的 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;
关于html - 由于 div 重叠，无法单击链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40392937/