Question

我有一个

<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)
    }

Answer 1

您可以设置z-index css属性，该属性会导致使用较高z-index样式化的元素显示在z-index较低的元素上方。这仅适用于绝对且相对定位的元素。由于您的元素有position: absolute，因此您应该只需将z-index属性添加到每个元素的css样式中。

   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指数的元素通常覆盖一个较低的元素。

指定Div的优先级

1 个答案: