Geek Answers Handbook

Image Overlay Div

So, I have a <div> with relative positioning, and it has a child <img> with absolute positioning.

 <div style="position: relative;"> <img src="image.png" style="position: absolute;" /> <span id="overlay_text">OVERLAY</span> </div>

The problem is that it should be on top (higher on the Y axis or closer to the top of the screen), but it is measured only at a distance from the bottom.

+7
html css overlay
source share
3 answers

Use z-index and top . This will fold the div at the bottom, the image and then the top layer (overlay). To set positioning from the top edge, use top , which can be used with negative numbers if you need it to be higher on the y axis than its parent. In the example below, the 10px range moves over the top of its parent div.

 <div style="position: relative; z-index: 1;"> <img src="image.png" style="position: absolute; z-index: 2;" /> <span id="overlay_text" style="position: relative; top: -10px; z-index: 3;">OVERLAY</span> </div>
+8
source share

Depending on what you are looking for exactly, but a simple example based on @Joe Conlin's answer would have to add a negative top value.

Also a small correction on @Joe Conlin, the span should have an absolute position that is not related to opinion.

http://jsfiddle.net/KevinFarrugia/fj83ytwp/1/

 <div class="parent"> <img src="http://www.gstatic.com/webp/gallery/1.webp" /> <span class="overlay">OVERLAY</span> </div>

CSS

 .parent{ position: relative; margin: 2em; } .parent img{ position: absolute; } .parent .overlay{ position: absolute; top: -1em; text-align: center; width: 100%; }
0
source share

In some cases, this is the best solution, so the parent div gets the height of the image:

 <div style="position: relative; z-index: 1;"> <img src="image.png" /> <span style="position: absolute; top: 0px; z-index: 3;">OVERLAY</span> </div>
0
source share

More articles:


All Articles