Home/ Questions/Q 720009
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T05:42:34+00:00

I have a container (div) with a background image. In this div there is

  • 0

I have a container (div) with a background image. In this div there is a menu – a horizontal list. What I need is to insert an image onMouseOver, positioning it absolutely, and showing it behind the text (of course!) AND on top of the div’s background image. I also use jQuery, but I think this doesn’t matter. The problem can be viewed online.

<html>
<head>
  <style type="text/css">
    img {
      top: 0;
      left: 0;
      position:absolute;
      z-index:-1;
    }

    #main {
      color: red;
      margin: 30px;
      padding: 20px;
      width: 700px;
      min-height: 400px;
      z-index: -2;
      background-image: url("http://www.google.com/logos/mother10-hp.gif");
      background-repeat: no-repeat;
    }
  </style>
</head>

<body>
  <div id="main">
    <h1>Z-Index question:</h1>
    <img src="w3css.gif" width="100" height="140" />
    <p>How can we place the green pic between the text and the div#main?</p>
    <p>I need the green gif to appear</p>
    <ol>
      <li>On top of #main's background image</li>
      <li>Behind the text</li>
    </ol>
  </div>
</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It seems you need position:relative;, absolute or fixed on a div for the z-index to take effect.

    • 0