The position of the div above the image

Question

I want to place a DIV with the contents of an addense script on top of img, which I use as a banner.

I have an img tag inside a div. then I placed the google script inside the next div and set this style for it

style="float:right;left:250;z-index:2"

The addition is shown below img, and not on top of it. Any ideas?

Answer 1

You want to put the second div with absolute:

http://jsfiddle.net/sbNZu/

Relevant Code:

img {
    border: 2px solid black;   
}

#container {
    position: relative;    
}

#example {
   position: absolute;
   top: 10px;
   left: 10px; 
    
   padding: 5px;
   background-color: white;
   border: 2px solid red;
}

<div id="container">
    <img src="https://placekitten.com/g/193/129">
    <div id="example">This is my div</div>
</div>

Run codeHide result

Answer 2

You need to use position: absolute;, and the parent should be position: relative. Without the correct position rule, z-index means squat.

Answer 3

, position: relative top.

Answer 4

Ask the parent with position: relative, the offspring with position: absolute, and use negative values ​​for the child fields to move him on top. You may not even need to deal with z-index.