4

私は

<div class="banner-right">

と

<div class="logo">

Div Classロゴはバナーの右側に重なっていますが、問題は右側のバナーがロゴを覆っているということです。より重要でバナーの上に表示されるようにロゴを設定する方法はありますか？

div.logo
{
    display: block;
    position: absolute;
    top: 11px;
    left: 483px;
    margin-left: 472px;
    width: 214px;
    height: 169px;
    background-image:url(images/doxramos_logo.png);
        }

div.head-banner-right
{
    display: block;
    position: absolute;
    top: 0px;
    left: 159px;
    margin-left: 472px;
    width: 50%;
    height: 60px;
    background-image:url(images/metal_grid.jpg)
    }
4

1 に答える 1

8

z-indexcssプロパティを設定すると、高いスタイルの要素z-indexが低いスタイルの要素の上に表示されますz-index。これは、絶対的および比較的配置された要素に対してのみ機能します。要素が含まれているので、各要素のcssスタイルにプロパティをposition: absolute追加できるはずです。z-index

   div.logo
    {
        display: block;
        position: absolute;
        top: 11px;
        left: 483px;
        margin-left: 472px;
        width: 214px;
        height: 169px;
        background-image:url(images/doxramos_logo.png);
        z-index: 100;
    }

    div.head-banner-right
    {
        display: block;
        position: absolute;
        top: 0px;
        left: 159px;
        margin-left: 472px;
        width: 50%;
        height: 60px;
        background-image:url(images/metal_grid.jpg)
        z-index: 50;
      }

実例：http：//jsfiddle.net/HTM5v/

MDNドキュメント：https ：//developer.mozilla.org/en-US/docs/CSS/z-index

z-index CSSプロパティは、要素とその子孫のzオーダーを指定します。要素が重なると、zオーダーによってどちらが他方をカバーするかが決まります。z-indexが大きい要素は、通常、z-indexが小さい要素をカバーします。

于 2012-10-25T23:57:05.997 に答える