1

という名前の背景画像を含む<h1>という名前の div クラスにヘッダーを配置しようとしています。を使用してそれらを積み重ねて追加しましたが、まだ上に配置されていません。lightlight.pngZ-indexposition:relative<h1><div class=light>

私は何を間違っていますか？これが私のhtmlコードです:

<body>
    <div class="light"></div>
    <h1>sdfdsf</h1>
</body>

CSS コード:

body {
    background-image: url(images/bg.jpg);
    background-repeat: repeat;
    z-index:1;
}
.light {
    background-image: url(images/light.png);
    margin-left:auto;
    margin-right:auto;
    z-index:2;
    width:763px;
    height:566px;
    position:relative;
}
h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 48px;
    color: rgba(255,255,255,1);
    position:relative;
    z-index:5;
}
4

6 に答える 6

2

<h1>タグの中にタグを配置するだけです<div>。

<div class="light">
    <h1>sdfdsf</h1>
</div>

実際の例: Tinkerbin
例を表示するために背景色を変更しました。

これを使用する必要はありませんz-index。

于 2012-07-28T16:55:21.620 に答える
2

コメントで私が言ったことの例を次に示します。

html コード:

<body>
  <div class='outer'>
      <div class="light"></div>
      <h1>sdfdsf</h1>
  </div>
</body>

CSS コード: 

body {
   background-image: url(images/bg.jpg);
   background-repeat: repeat;
}

.outer{
   position:relative;
}
.light {
   background-image: url(images/light.png);
   margin-left:auto;
   margin-right:auto;
   width:763px;
   height:566px;
   position:absolute;
}
h1 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 48px;
   color: rgba(255,255,255,1);
   position:absolute;
   z-index:99999999999;
   top:0;
   left:0;
}

すべての相対位置を使用できますが、CSSバグのために完全にブラウザーに準拠しているわけではないため、新しいブラウザーだけでなく古いブラウザーでも問題なく表示されるため、この方法を好みます。

于 2012-07-28T16:58:20.133 に答える
2

フィドル

z-index体に割り当てる必要はありません

HTML -

<div class="light"></div>
<h1>hi</h1>​

CSS -

.light {
    background-image: url(http://www.ostpl.com/Gallery/web-hosting.jpg);
    margin-left:auto;
    margin-right:auto;
    z-index:1;
    width:763px;
    height:566px;
    border: 1px solid #f00;
    position: relative;
}
h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 48px;
    color: rgba(0,0,0,1);
    position:absolute;
    left: 0;
    top: 0;
    z-index:2;
}​
于 2012-07-28T17:00:25.740 に答える
1

<h1>中にタグを入れるdiv light

 <body>
    <div class="light">
      <h1>sdfdsf</h1>
    </div>
</body>
于 2012-07-28T16:55:29.610 に答える
1

代わりに絶対を使用

<style type="text/css" media="screen">
    body {
        background-color: black;
        background-repeat: repeat;
        z-index:1;
    }
    .light {
        background-color: yellow;
        margin-left:auto;
        margin-right:auto;
        z-index:2;
        width:763px;
        height:566px;
        position:absolute;
    }
    h1 {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 48px;
        color: rgba(255,255,255,1);
        position:absolute;
        z-index:5;
    }
</style>
  • absolute : 要素は、最初に配置された (静的ではない) 祖先要素に対して相対的に配置されます
  • relative : 要素は通常の位置に対して相対的に配置されるため、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します
于 2012-07-28T16:56:01.593 に答える
1

デモを見る

HTML:

<body>
  <div class="light"></div>
  <h1>sdfdsf</h1>
</body>​

CSS:

.light {
    position:relative;
    width: 300px;
    height: 100px;
    background: #ccc;
    z-index: 1;
}

h1 {
    position:relative;
    z-index: 2;
    top: -10px;
}​

より大きな z-index - より高い要素。

于 2012-07-28T16:57:21.950 に答える