title: z-index on Bootstrap elements
body: <p>I am faced with a situation where I am struggling to find a solution.  So I have two sections.  Within the top section, I have an image which I have placed at the bottom using flex.  The idea is simple, as I scroll down, the image should slide up into place.  </p>
  
  <p>I have got this to work, but I have noticed that when the image is within section 2, it sits on top of this section, instead of behind it.  Ideally, you should not be able to see any of this image within section 2.  This <a href="https://jsfiddle.net/z69w9u4g/52/" rel="nofollow noreferrer">JSFiddle</a> demonstrates my problem.</p>
  
  <p>So I have found a way to overcome this.  I essentially gave each section a relative position and then set a z-index.</p>
  
  <pre><code>#sectionTwo {
    position: relative;
    z-index: -1000;
  }
  #sectionThree {
    position: relative;
    z-index:1000;
    background: #ccc;
  }
  </code></pre>
  
  <p>This seemed to fix the problem, but one thing I do not like is that when I try to inspect element, it seems to always focus on the <code>body</code> element rather than the section I select.</p>
  
  <p>Anyways, with that fix in place, I was faced with another problem.  The section also needed a box at the top, that would overlap into the section above it.  I made a quick sketch to demonstrate what I am after</p>
  
  <p><a href="https://i.stack.imgur.com/UI3cH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UI3cH.jpg" alt="Layout"></a></p>
  
  <p>I have noticed however that setting the <code>z-index</code> is now causing me problems.  I can't get the box to overlap section one.</p>
  
  <p>Here is my latest <a href="https://jsfiddle.net/z69w9u4g/59/" rel="nofollow noreferrer">JSFiddle</a> which demonstrates where I am at.</p>
  
  <p>So really I am after advice on whether I am handling the z-index correctly, and how I can get the box overlapping section one.</p>
  
  <p>Thanks</p>