title: CSS Fixed - alternative way to keep an HTML Element in place
body: <p>I want to create a web page that has a section at the top that contains the headings, then a section below that contains the data.  I then want the headings to stay visible and the data to be able to scroll in the same way you can lock a row in Excel.</p>
  
  <pre><code>&lt;div id="heading"&gt;This is my Heading&lt;/div&gt;
  &lt;div id="data"&gt;
     &lt;a&gt;1st line of Data&lt;/a&gt;
     &lt;a&gt;2nd line of Data&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I know if in my css I set <code>#heading { position: fixed; top: 0px; left: 0px }</code> then my heading will stay where it is and my data can scroll underneath it.  But is there another way of doing this?</p>
  
  <p>The reason I want to find a different way is I have a legacy app that uses Frames (yes I know all the reasons not to - but if any of you have had a conversation with your boss where you explain that the fix for a tiny bug is a complete re-write and he/she say's yeah go for it, then I want to come work with you!) and we have Fixed elements in the frames, but if the Frame is set to zero size (closed) then reopened again they just can't be seen in Safari on a mac.  The elements are still in the DOM, they should be visible, even their tooltips can be seen and their click events work too.</p>
  
  <p>So after many hours of trying to get them to display I figure it's worth looking at an alternative to the <code>css fixed</code>.</p>