80525

overlay a img tag with a div using negative margin-top on the sibling div

Question:

I am trying to overlay a img with a div using negative margin on the div, the text inside the div is displayed over the image, while the background of the div is being displayed under the img .

html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div class="a"> <div class="b"><img src=""/></div> <div class="c">somebody</div> </div> </body> </html>

css:

.a{ height:60px; background:#ccc; } .b img{ height:60px; width:60px; background:red; } .c{ background:blue; height:20px; margin-top:-20px; }

i have observed this behavior in IE9 and chrome.

is this behavior as expected? if yes, what is the reason?

I could make the div absolute or relative to achieve what i am trying to do, but i am not able to understand this behaviour.

<a href="http://jsbin.com/gejuzuza/1/edit" rel="nofollow">http://jsbin.com/gejuzuza/1/edit</a>

Answer1:

If you add position: relative; to your CSS for .c, it will put the div with the c class above the div with the b class

Recommend

  • How to center a menu using flexbox [closed]
  • Embedding a Google map
  • jinja2 template not found and internal server error
  • How secure are apple APNS push notifications?
  • Why does the font in these TD elements render at different sizes?
  • google maps autocomplete bounces back already cleared text …odd…odd…odd
  • I am receiving HibernateException “No Hibernate Session bound to thread, and configuration does not
  • MySQL: Update rows in table by iterating and joining with another one
  • Javascript CORS - No 'Access-Control-Allow-Origin' header is present
  • Why isn't obj.style.left = “200px”; working in this code?
  • Tell Git to stop prompting me for conflicts when none really exist?
  • nodemcu custom firmware build problems
  • Android Studio Can't Find tools.jar
  • Uncaught TypeError: $(…).select2 is not a function
  • Center align outputs in ipython notebook
  • Convert SQLite database to XML
  • How to view images from protected folder with php?
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • Eclipse CDT error: Unable to compile
  • Android - Material Design - NavigationView - How to put vertical scroll?
  • Display images in Django
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Jquery UI tool tip close icon
  • MongoDB in PHP using aggregate to group by _id is null not working
  • Display issues when we change from one jquery mobile page to another in firefox
  • req.body is undefined - nodejs
  • Resize panoramic image to fixed size
  • How to set/get protobuf's extension field in Go?
  • Modifying destination and filename of gulp-svg-sprite
  • SSO with signing and signature validation doesn't work
  • How to show dropdown in excel using jrxml (jasper api)?
  • Importing jscolor library in angular 2
  • To display the title for the current loaction in map in iphone
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • trying to dynamically update Highchart column chart but series undefined
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Change div Background jquery
  • costura.fody for a dll that references another dll
  • How to Embed XSL into XML