css - 指定 Div 的优先级

Question

我有一个

<div class="banner-right">

和一个

<div class="logo">

Div 类 Logo 与 banner-right 重叠，但问题是右 banner 覆盖了 logo。有没有办法将 Logo 设置为表明它更重要并且会显示在横幅上？

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

The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.