4

我有一个

<div class="banner-right">

和一个

<div class="logo">

Div 类徽标与横幅右侧重叠，但问题是右侧横幅覆盖了徽标。有没有办法设置标志说它更重要，它会显示在横幅上？

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。这仅适用于绝对和相对定位的元素。由于您的元素具有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-order 确定哪个元素覆盖另一个元素。z-index 较大的元素通常会覆盖 z-index 较小的元素。

于 2012-10-25T23:57:05.997 回答