title: How to Place Text Over a Parallax Scrolling Image
body: <p>I'm trying to display a heading over the image on my website.  Here's a fiddle:</p>
  
  <p><a href="https://jsfiddle.net/o3942ppa/1/" rel="noreferrer">https://jsfiddle.net/o3942ppa/1/</a></p>
  
  <p>I tried to fix the problem by creating a heading with id header such as:</p>
  
  <pre><code>&lt;h2 id="header"&gt;Text&lt;/h2&gt;
  </code></pre>
  
  <p>and style it absolutely with a z-index to ensure it displays on top like:</p>
  
  <pre><code>#header{
    position: absolute;
    z-index: 1000;
    top: 200px;
    left: 200px;
  }
  </code></pre>
  
  <p>I was assuming that this would result in positioning the title on top of all over elements, positioned from the edge of the document. However, I didn't get the desired result.  How would I go about doing this?  Also, I read last night that it's generally better to using floats than positioning.  Not sure if that applies in this case, or if it's true at all.  I would appreciate if someone could weigh in.</p>