Menu
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??
203
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.
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.
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.
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”.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
