Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

position a div on top of an image

Tags:

html

css

I want position a DIV with the content of an addsense script on top of a img that I use as a banner.

I have the img tag inside a div. then I put the google script inside a following div and set this style to it

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

The add is shown below the img and not on top of it. Any ideas??

like image 203
Carlos Blanco Avatar asked Nov 18 '10 18:11

Carlos Blanco


People also ask

How do I put a div on top of a picture?

You need to use position: absolute; and the parent must be position: relative . Without a proper position rule set z-index means squat. Show activity on this post. Have the parent with position: relative , the children with position: absolute , and use negative values for margin on the children to move it on top.

How do I position a div on top of another?

By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div . z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index . Note that this property only works with positioned elements.

How do I overlay one image to another CSS?

As the simplest solution. That is: Create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image.

How do you put something over a picture in HTML?

CSS position property is used to set the position of text over an image. This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”.


1 Answers

You want to position 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>
like image 54
Jeff B Avatar answered Sep 21 '22 08:09

Jeff B