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

Question

我需要#thePicture在.splash-container,之上，.splashand/or.splash-head和.splash-subhead在[=之上12=].

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

这是相关代码，我也在使用 Pure CSS 但我仔细查看了那里，并不认为它来自那里，尽管考虑到我无法说出这里发生了什么，可能我错过了一些东西.

#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;
}

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

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 问题并使元素正确堆叠

Having trouble with z-index and getting elements to stack correctly

css

position

z-index

css-position