css position - Use site background for CSS fixed element -

i have fixed div "hovering" above rest of site through position: fixed. however, ugly when other site-elements (i.e. text) appear behind hovering element. hide elements when behind hovering element, meaning show site background behind it.

because site background in gradient, can't give floating element it's own background. there way this?

body {    width: 200px;    font-family: sans-serif;    background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);  }    #fixed {    position: fixed;    top: 0;    left: 0;    padding: 20px;    font-size: 200%;    z-index: 5;  }

<div id="fixed">  text  </div>    <div id="text">    <script>    for(i=0;i<50;i++) {      document.write("text text text text<br />")      }    </script>  </div>

edit: clarify: want background of fixed element same site background fixed element over. don't want put fixed element above other content.

the way can see doing set scroll frame text , leave fixed element(which not need fixed anymore) on top of page

body {    width: 200px;    font-family: sans-serif;    background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);    overflow: hidden;  }    #fixed {    position: fixed;    top: 0;    left: 0;    padding: 20px;    font-size: 200%;    z-index: 5;  }    #text{      margin-top: 80px;      height: 400px;      overflow: auto;      width: 400px;  }

<div id="fixed">  text  </div>  <div id="text">    <script>    for(i=0;i<50;i++) {      document.write("text text text text<br />")      }    </script>  </div>