1

ここに示されているレイアウトを取得しようとすると、http：//www.reversl.net/zindex/添付された画像のようになります。明確にここに画像の説明を入力してくださいするために.....ロゴ（ヘッダーの一部）は画像をオーバーレイする必要があります。画像はヘッダーの下部と完全に一致する必要があります。これはz-indexを使用して達成できることは知っていますが、これについてどのように正確に行うことができますか？

header {
width: 100%;
height: 30px;
background: #222;
position: relative;
z-index: 3000;
}

#login {
width: 30%;
float: right;
text-align: right;
padding: .5em 0;
z-index: 5000;
}

#logo {
    width: 25%;
    float: left;
    padding: 3em 3em 1em 3em;
    text-align: center;
    z-index: 9999;
    background: #222;
}

.logo-text {
font: 2em/1em "lucida grande";
display: inline-block;
color: #777;
}  

#bg {
margin: -2em 0 0 0;
clear: both;
}
4

4 に答える 4

5 
#login {
    float: right;
    text-align: right;
    width: 30%;
    z-index: 5000;
}

#logo {
    background: none repeat scroll 0 0 #222222;
    float: left;
    padding: 3em 3em 1em;
    position: absolute;
    text-align: center;
    width: 25%;
    z-index: 9999;
}


.wrap-inner {
    margin: 0 auto;
    max-width: 1216px;
    position: relative;
    width: 95%;
}

に追加され#logo - postion: absolute,、 .wrap-inner - position: relative;

また、パディングが削除されました#login

于 2012-09-05T10:58:06.480 に答える
4

このフィドルを確認してください

私がいつも使っているのは、1つのposition: absolute中のdivposition: relativeです。

于 2012-09-05T11:12:26.083 に答える
2

z-indexについてではありませんposition

.wrap-inner {
     margin: 0 auto;
     max-width: 1216px;
     position: absolute;
     width: 95%;
}

絶対測位のMDN説明

[...]絶対に配置された要素はフローから取り出されるため、他の要素を配置するときにスペースを占有しません。

于 2012-09-05T10:54:34.363 に答える
1

これは実際にはz-indexがどのように機能するかという特定の解決策ではありませんが、この特定の例では、より良いアプローチである可能性があります。

画像をhtml要素として緩め、次のように本文に背景画像を設定することができます。

body{
  background-image: url(http://www.reversl.net/zindex/bk.jpg);

  /* Set top position on background image 30px down (header height value): */
  background-position: 0px 30px;

  /* Also in CSS3 it is possible to set size: */
  background-size: 100% Auto;
}
于 2012-09-05T11:22:54.143 に答える