0

次の jsfiddle を検討してください: http://jsfiddle.net/dHaM8

HTML:

<div class="first"><img src="http://placekitten.com/g/200/300"/></div>
<div class="second"></div>
<div class="third"><p class="test"> test test test </p></div>

CSS:

.first img {position:fixed; top: 10; left: 10; z-index: 1}
.test {position:fixed; top: 10; left: 10; z-index: 10}
.first {
    background-color: #a6a6a6;
    height: 600px;
    background-attachment: fixed;
    background-image: url("http://placehold.it/1000x500");
}

.second {
    background-color: #fff;
    min-height: 500px;
    z-index:2;
    position:relative;
}

 .third {
    background-color: #ff0000;
    min-height: 500px;
    background-attachment: fixed;
    position:relative;
    z-index:3;
 }

私がやろうとしていることは次のとおりです。

子猫は、CSS を見ると既に達成されている「最初の」div 内で固定されたままになるはずです。

ただし、3 番目の div のテキストは表示されません。

divを子猫のdivよりも高く設定すると、最初のdivにテキストが表示されますが、これは望ましくありません。3番目のdivにのみ表示したい。

助けてください。

4

1 に答える 1

0

<p>タグに相対的な position: を指定します。フィドルを見る

.test {position:relative; top: 10px; left: 10px; z-index: 10}
于 2013-04-19T19:49:42.467 に答える