Question

我需要#thePicture位于.splash-container,和.splash和/或.splash-head和.splash-subhead之上，高于#thePicture。

我一直试图让它工作一段时间，似乎没有任何进展。我尝试为每个相关元素设置不同的位置和z-index，但无济于事。

下面是相关的代码，我也使用了纯CSS，但我看过那里，并没有想到它来自那里，虽然考虑到我不知道这里有什么可能我错过了什么。 / p>

＆＃13;

#thePicture {
  float: left;
  clear: right;
  z-index: 1;
  opacity: .4;
  overflow: hidden;
  height: 65%;
  left: 0;
  bottom: 13%;
  position: fixed !important;
}
.splash-container {
  overflow: hidden;
  width: 100%;
  height: 88%;
  top: 0;
  left: 0;
  position: fixed !important;
  color: grey;
}
.splash {
  width: 90%;
  height: 50%;
  margin: auto;
  position: absolute;
  top: 100px;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
}
.splash-head {
  font-size: 20px;
  padding: 1em 1.6em;
  font-weight: 500;
  border-radius: 5px;
  line-height: 1em;
  z-index: 200;
}
.splash-subhead {
  letter-spacing: 0.05em;
  opacity: 0.8;
  font-weight: 500;
  position: static;
}

＆＃13;

<div class="splash-container">
  <div class="splash">
    <h1 class="splash-head">Lorem ipsum dolor.</h1>

    <p class="splash-subhead">
      Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales!
    </p>

    <p>
      <a href="http://purecss.io" class="pure-button pure-button-primary">Get Started</a>
    </p>
  </div>
</div>
<div class="side-left">
  <div>
    <%=i mage_tag 'thePicture.png', alt: 'thePicture', id: 'thePicture' %>
  </div>
</div>

＆＃13;

Answer 1

稍微更改HTML的标记并在CSS中使用z-index。

她是一个更简化的版本，我添加了background-color，因此您可以直观地看到排序。

这里的实例： https://jsfiddle.net/xo08o63z/

    .splash {
    position: fixed;
    width: 90%;
    height: 50%;
    background-color:green;
    z-index:101;
}
#thePicture {
    position: fixed;
    z-index:100;
}

.splash-container {
    position: fixed;
    width: 100%;
    height: 88%;
    background-color:red;
}

.splash-head {
    background-color:yellow;
    z-index: 200;
}
.splash-subhead {
    background-color:orange;
    position: static;
}

        <div class="splash">
         <h1 class="splash-head">Lorem ipsum dolor.</h1>
        <p class="splash-subhead">Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales!</p>
        <p><a href="http://purecss.io" class="pure-button pure-button-primary">Get Started</a></p>
    </div>
<div class="splash-container">

</div>
<div class="side-left">
    <div>
        <img id="thePicture" src="http://www.comnerd.org/wp-content/uploads/2013/09/MORE-EXAMPLES-011.jpg" alt="Smiley face" height="420" width="420">
    </div>

遇到z-index问题并使元素正确堆叠

1 个答案: