Question

我的设计中有一些重叠的div，我的链接无法点击。我知道链接不可点击的原因是因为所述重叠的div，所以我分配了一些z索引来尝试和解决这个问题。但是，我注意到我只能通过使父div（包含实际容纳我的文本的div的那个）成为最高的z-index元素来使链接可点击...这完全打破了我的设计和它的外观。有没有不同的方式，我没有注意到？或者这是否必须完全重做设计？

The link to the journal skin I am working on.

我还想在那里抛出一些编辑，提到在branchoverlay div中的侧枝与其他div有点重叠，请参阅here。我听说过将它们从自己的div中移除并将它们置于内容持有者的背景中的建议，但这会破坏我认为的那种效果吗？是否有更好的方法来格式化标题/下拉区域以实现div的轻微叠加，而不必通过负边距进行如此多的重叠？

HTML：

use std::io::Write; // <--- bring the trait into scope

fn main() {
    std::io::stdout().flush().expect("some error message");
}

CSS：

    <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>

感谢任何人提供的任何帮助和建议！

Answer 1

您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;

Answer 2

请删除刚刚用于保存背景图片的branchoverlay div并在contentholder类中添加图片

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

检查此网址：jsfiddle.net/pfayap45

由于div重叠，无法点击链接

2 个答案: