CODEWITHSUNDEEP
csspositioncss-positionz-index
thesowismine
thesowismine

Reputation: 930

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

I need the #thePicture to be on top of .splash-container, and .splash and/or .splash-head and .splash-subhead to be above #thePicture.

I've been trying to get this to work for a while now and seem to be making no progress. I've tried setting different positions and z-index's for every related element to no avail.

Heres the relevant code, I'm also using Pure CSS but I looked through there and don't think its coming from there, although considering I cant tell whats going on here its possible I missed something.

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

Upvotes: 0

Views: 113

Answers (1)

GibboK
GibboK

Reputation: 73918

Change slightly the markup for your HTML and use z-index in your CSS.

Her a more simplified version, I have added background-color so you can see visually the ordering.

Live example here: 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>

Upvotes: 2

Related Questions