2

divが表示されないこの問題があります。コードは単純で、テストのみを行っています。

<html>
<head>
    <title>Main</title>

    <style>
        .simple-div {
            -moz-border-radius: 15px;
            border-radius: 15px;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body style="background:url('backgrounds/cupcakeBG.jpg') 50% -105px repeat;">
    <div style="background: #C8BBBE; top:0px; left:0px; width:100%; height:70px; position: fixed; -moz-border-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">

    </div>

    <div style="-moz-border-radius: 15px; border-radius: 15px; height: 200px; width: 200px;">

    </div>

</body>
</html>

背景画像の上に 2 番目の div を保持するにはどうすればよいですか? 現在画面には表示されていませんが、クロムを介して Inspect 要素を使用して背後で強調表示されていることがわかります。

よろしく、

4

4 に答える 4

3

一番上に表示したい divにposition: relativeとを追加します。z-index: 9999;

于 2013-03-12T21:06:47.800 に答える
3

両方の div に z-index を指定して、position:relative または position:absolute を使用します。

<div style="background: #C8BBBE; top:0px; left:0px; width:100%; height:70px; position: fixed; z-index: 0; -moz-border-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">
</div>

<div style="-moz-border-radius: 15px; border-radius: 15px; height: 200px; width: 200px; position: relative; top: 0; left: 0; z-index: 15; background-color:#ff0000;">
    test
</div>
于 2013-03-12T21:07:29.933 に答える
1

2 番目の div にはコンテンツ、背景、境界線などが含まれていないため、画面に目に見えるものは何もありません。それはそこにあり、あなたの体の背景の上にあります.

上の固定要素の上にも表示する場合は、z-indexより高くする必要があります。を使用するためのものpositionではないを与える必要があります (ここでは を使用します):staticz-indexrelative

<body style="background:url('backgrounds/cupcakeBG.jpg') 50% -105px repeat;">
    <div style="background: #C8BBBE; top:0px; left:0px; width:100%; height:70px; position: fixed; z-index:1; -moz-border-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">

    </div>

    <div style="background:#F00; position:relative; z-index:2; -moz-border-radius: 15px; border-radius: 15px; height: 200px; width: 200px;">

    </div>

</body>

この特定の例ではz-index、同じスタッキング親にあり、固定 div が最初であるため、 が等しくなる可能性があることに注意してください。ただし、より明示的にする方が良いことがわかり、2 番目の div に実際により高い値を与えます。

于 2013-03-12T21:08:54.647 に答える
0

position:absolute2 番目の div のスタイル属性に追加する目的に応じて、1 つのオプション。

于 2013-03-12T21:12:53.420 に答える