2

私はこのhtmlを持っています：

<html>
    <body>
        <header></header>
        <div></div>
        <footer></footer>
    </body>
</html>

そしてこのcssの部分：

header {
    width: 500px;
    height: 100px;
    background: red;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

div {
    width: 500px;
    height: 700px;
    background: yellow;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

footer {
    width: 500px;
    height: 50px;
    background: blue;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

これはここでも見ることができます：http：//jsfiddle.net/XGTtT/基本的に、他の2つの領域の下に黄色の領域を配置したいのですが、z-indexが機能していないようです。何が問題で、どのように修正するのですか？

4

3 に答える 3

3

要素を互いに前または下に配置するには、絶対配置と z-index を組み合わせて使用​​する必要があります。z-index は現在、静的なデフォルトの配置では機能しないためです。

達成したい内容によっては、div に追加position: relativeし、div に負のマージンを使用して、ヘッダーとフッターの上または下にプルする方が簡単な場合があります。

于 2012-10-25T15:13:57.063 に答える
1 
header {
    width: 500px;
    height: 100px;
    background: red;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
    position: absolute;
    top:0;
}

div {
    width: 500px;
    height: 450px;
    background: yellow;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 5;
    position: absolute;
}

footer {
    width: 500px;
    height: 50px;
    background: blue;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
    position: absolute;
    bottom: 0;
}

http://jsfiddle.net/XGTtT/8/

于 2012-10-25T15:25:53.947 に答える
0

数字が大きいほど手前に、数字が小さいほど後ろに下がります。要素ごとに異なる番号を指定します。div 1、ヘッダー 2、フッター 3 と同様です。

于 2012-10-25T15:08:12.823 に答える