CODEWITHSUNDEEP
csshtmlimageoverlap
shub
shub

Reputation: 1052

Image over div-container

How can I overlap the message strip with the div?

Image over div-container

The position of the div "nav" must be fixed.

<img src="images/diagonal_corner_message_strip.png" id="copyright" /><div id="nav">
  <ul>
    <li><a class="top" href="#top"><span></span></a></li>
    <li><a class="bottom" href="#bottom"><span></span></a></li>
    <li><a>List</a></li>
    <li><a>Create</a></li>
  </ul>
 </div>

#nav {
    padding: 6px 0;
    border-bottom:1px solid #ddd;
    position:fixed;
    width:100%;
    top:0px;
    left:0px;
    right:0px;
    margin:0;
    background:#fff url(../images/navigation/nav.png) repeat-x center left;
    z-index:999999;
}

img#copyright {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    float:left;
}

Thanks a lot!

Upvotes: 4

Views: 23903

Answers (1)

Kokos
Kokos

Reputation: 9121

The z-index of #nav is set to 999999.

The z-index of img#copyright is not set.

The z-index defines the order in which elements will be shown, with the highest value being shown on top. The solution to your problem is easy, give img#copyright a higher z-index than #nav.

Upvotes: 5

Related Questions