0

編集：この背後に画像があるため、背景色を追加すると、テキストが隠れても画像が遮られます。ありがとう！

ページに固定要素があり、その下にテキストを含む 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;}
4

3 に答える 3

0

このようなものが欲しいですか: 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 の上部にコンテンツが表示されます。それらも修正します。

于 2013-07-02T17:46:01.527 に答える