溢出时文本不会隐藏在 div 后面

Question

编辑：这背后有一个图像，因此添加背景颜色会因此阻碍图像，即使它会隐藏文本。谢谢！

我在页面上有一个固定元素，下面有一个包含文本的 div。滚动页面时，我希望文本消失在固定 div 后面，但事实并非如此。使用 z-index 不起作用（参见代码）。对不起，所有的文字，我需要足够的屏幕滚动。

<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>

还有 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

如果您希望整个文本消失，您应该让“body”元素成为带有溢出滚动的元素，这样其他标题元素就会保持可见。我真的找不到使用固定 div 来做到这一点的方法。在标题周围添加了一个 p 标签，使其与底部对齐。和其他高度进行了修改，但这会给你一个很好的起点

#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;
} 

查看 jsfiddle：

http://jsfiddle.net/J69Pw/5/

Answer 2

你的 div 的背景是透明的，所以我们仍然可以看到后面的文字。

Answer 3

你想要这样的东西吗：http://jsfiddle.net/QkGwy/

如果是，则将背景颜色：白色设置为具有“标题”类的 div。

.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
}

而且 CSS 中的边距也不合适，这就是为什么内容在滚动时标题 div 的上侧可见的原因。也更正这些。