1

Web サイトの新しい流行は、要素がページを下にスクロールして他の要素の背後に消えることです (たとえば、テキストが表示された白い背景の背後に大きな画像が消えるとします)。他の要素の後ろに配置された固定スクロール。私が抱えている問題は、固定位置の要素が通常の流れから外れているため、z-index が固定位置の要素に影響を与えないことです。固定要素を他の要素の後ろに配置するCSSの方法はありますか?

4

1 に答える 1

3

できることの 1 つはz-index、その要素の を に設定することです-1。ただし、私position:relative;の記憶が正しければ、一部のブラウザーz-indexはposition:static;. また、その画像をcssでページの背景画像として単純に設定することも検討されましたか?
更新
あなたのコードの正確な性質がわからないので、これを達成する方法の基本的なモックアップを提案できます:
Fiddle: http://jsfiddle.net/jatN2/
CSS

#bg {
    position:fixed;
    height:100%;
    width:100%;
    z-index:-1;
}
#wrapper {
    position:absolute;
    z-index:1;
    background:transparent;
}
body {
    font-family:Arial, Helvetica, sans-serif;
    background:transparent;
}
.content {
    padding:20px;
    background:#FFF;
    margin:0px;
    display:block;
}

HTML

<img src="<!--Your background image here -->" id="bg" />
<div id="wrapper">
    <div class="space"><!--Just a placeholder for the area where you want the background image to show. Give this element a height so it'll show the bg for that amount of height --></div>
    <div class="content">
        <!--Put your content here -->
    </div>
</div>
于 2013-10-02T22:29:20.307 に答える