Anonymous# November 15, 2012 at 10:38 pm
Just wondering why this happens. It’s kind of hard to explain, but if you look at the example, you’ll see what I mean. I’m sure there’s a perfectly logical reason for this, but why does the image appear in between the H2 tags text and background color? I would think that the H2 tag would appear completely under or over the image…
[This is weird](http://codepen.io/msguerra74/pen/kbnzj “Weird”)Anonymous# November 15, 2012 at 11:35 pm
@ChristopherBurton – I was trying to do [something like this.](http://codepen.io/msguerra74/pen/kbnzj)
@joshuanhibbert – Haha, I thought for sure you’d be able to tell me the reason was because of some obscure anomaly in the css spec on how block level element backgrounds are rendered, or something fancy like that!Anonymous# November 15, 2012 at 11:55 pm
I actually wanted the H tag to partially overlay the image, which I know how to do, but ran into that weird issue in the process. I was really just wondering why that was happening more than I was wondering how do do what I was doing.
I appreciate all the help though!# November 16, 2012 at 2:31 am
It seems like inline elements (such as img) are stacked higher than block elements, regardless of whether they come before or after [the block element].
I think what’s happening is that because the img and h2 are sibling elements, the img overlays the actual h2 itself (in this case, the background) based on what I said above, but the text inside the h2 overlays the img because it is a child of the h2.
Here’s something I wrote that should hopefully explain what I mean: http://codepen.io/Iire/pen/fheGA
You must be logged in to reply to this topic.