title: Why does a relative positioned element appear above a floated element?
body: <p>I have two elements: one with relative positioning that defines most of my header, and a smaller one that I'd like to "float" on top of it.</p>
  
  <pre><code>&lt;div id=floater style="float:right"&gt;
  Floater!
  &lt;/div&gt;
  &lt;div id=header style="width: 100%; position: relative; background-color: lightgreen"&gt;
  This is the header
  &lt;/div&gt;
  </code></pre>
  
  <p>As shown in <a href="https://jsfiddle.net/jfengel/eax6wdpx/2/" rel="nofollow noreferrer">this fiddle</a>, the floated component is invisible. But if you remove the <code>position: relative</code>, the floated element pops right up. Futzing with the z-index hasn't yielded anything of interest.</p>
  
  <p>The header component isn't "mine"; it's inherited through React-Bootstrap. I could override, but right now I'm mostly looking to understand the interaction of float and relative positioning.</p>