Question

I have a

<div class="banner-right">

and a

<div class="logo">

The Div Class Logo overlaps the banner-right, but the problem is that the right banner covers the logo. Is there a way to set the logo to say that it’s more important and it will show over the banner?

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

You can set the z-index css property which will cause elements styled with a higher z-index to appear above those with a lower z-index. This only works for absolutely and relatively positioned elements. Since your elements have position: absolute you should be able to just add the z-index property to your css styles for each element.

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

Working Example: http://jsfiddle.net/HTM5v/

MDN Documentation: 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.