Text does not hide behind div when overflow - css

Question

Edit: There is an image behind this, so adding a background color would thus obstruct the image even though it would hide the text. Thanks!
I have a fixed element on a page and a div containing text below it. When the page is scrolled, I want the text to disappear behind the fixed div but it does not. Using z-index does not work (see code). Sorry about all the text, I needed enough for the screen to scroll.
<div id="screen">
<div class="title">
About
</div>
<div class="body">
t only the beginning of a weekend away from the rigours of Primary school and learning my times tables, but also my first real social experiences. Saturday was ‘Club Day’. At around the age of 8 or 9, my Mum decided that I needed to get out into the real world and get a taste of ‘Saturday life’, and all it had to offer. So, on the advice of my much older and wiser 10 year old cousin, I chose to join the local craft club. Each Saturday morning from that day onwards, I would join the 6 or 7 other girls in the hot, cramped ‘Cathy’s Crafts’ store in Montmorency. For $7 a week I could paint pieces of wood shaped as teddies, or perhaps even stick some glitter on a nice picture for Mother’s Day. Either way it served as a warning for the rest of my life that craft was definitely nolet roll cover in my house again.” Dad wad not quite so understanding. My skills with the paintbrush were often criticised, as I had not used a ‘polyglaze’ the valiant Montmorency, who had never yet won a club championship and are likely to never achieve this coveted goal. My Saturdays had taken on a new light, a change of direction and an earlier morning wake-up. Every Saturday I would wake up early, in excited anticipation of the day ahead. Mum would check my schedule and inform me of the day’s events. Int flowers quite right, the time had come for me to give my craft club days away. Forever. And so it was that I found myself, hand glued to Mum’s, at the Little Athletics sign-up day. And so it was that I found myself being talked into being
</div>
</div>
And the CSS
#screen{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.title{
font-size: 30px;
margin-bottom: 15px;
margin-top: 110px;
text-align: center;
width: 90%;
position: fixed;
margin-left: 170px;
z-index: 3;
}
.body{
margin-top: 160px;
margin-left: 294px;
margin-right: 90px;
text-align:justify;
height: 53%;
z-index: 2;}

Answer 1

If you wish for the whole text to disappear you should have the "body" element be the one with overflow scroll, that way the other title element stays visible. There isn't really a way I could find to do this using a fixed div. Added a p tag around the title to align it to the bottom. and other heights were modified but this will give you a good starting place
#screen{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url('http://thisisarequiredfield.com/home_files/field1.jpg');
}
.title{
position:relative;
font-size: 30px;
height: 20%;
text-align: center;
float:left;
width: 100%;
z-index: 3;
}
.title p{
position:absolute;
bottom:0;
left:294px;
}
.body{
padding:0;
margin:0;
padding-left: 294px;
padding-right: 90px;
height:80%;
text-align:justify;
overflow: auto;
z-index: 2;
}
see the jsfiddle:
http://jsfiddle.net/J69Pw/5/

Answer 2

The background of your div is transparent so we can still see the text behind.

Answer 3

Do you want something like this : http://jsfiddle.net/QkGwy/
If it is, then set the background color:white to the div having 'title' class.
.title{
font-size: 30px;
margin-bottom: 15px;
margin-top: 110px;
text-align: center;
width: 90%;
position: fixed;
//margin-left: 170px;
z-index: 3;
border:1px solid;
background:white
}
And margins are also not proper in the css that's why content is visible on the upper side on title div on scroll. Correct those as well.