How can I apply a fade-out-text effect with a transparent-to-white gradient?

Question

I'd like to create an effect to fade out the bottom of articles (similar to the effect on wsj.com articles). I added a #transparent div with a gradient background that becomes less transparent. However, the background doesn't cover up the text, so the white background doesn't show up. How can I fix it so the white covers the text?

#translucent{
  margin-top: -100px;
  content: "";
  height: 110px;
  z-index: 2;
  width: 100%;
  positon: relative;
  background: -webkit-linear-gradient(top, rgba(256,256,256,0) 0%,rgba(256,256,256,0.5) 90%,rgba(256,256,256,1) 100%); 
}

<div>
  <p>
    The quick brown fox jumps over a lazy dog </p>
    <p>
    The quick brown fox jumps over a lazy dog </p>
    <p>
</div>
<div id="translucent"> 
</div>

(Changing the color to black would achieve a fade-to-black effect, but I want the text to fade to white.)

Answer 1

Looks like changing positon: relative; to position: absolute; solved the problem.