CODEWITHSUNDEEP
htmlcss
fildred13
fildred13

Reputation: 2350

Only the background of div is hidden by img?

A div which contains an image has rounded corners using border-radius and overflow:hidden.

The div also contains another div with an orange background and some white text.

When the second div is placed over the image using a negative margin, the result is that the orange background is hidden behind the image, but the white text appears over top of the image. Why is this?

Fiddle: http://jsfiddle.net/nq9Jv/

Further question: how do I make the orange div appear fully "above" the image, bearing in mind that I cannot use position: relative because that would take it out of the flow and thus not allow the border radius of the first div to conceal a part of the second.

Upvotes: 0

Views: 39

Answers (1)

tdooner
tdooner

Reputation: 908

I am not sure the reason that the orange background doesn't appear above the image when using a negative margin.

I have tweaked your example a bit, and by using position: relative on the parent element and position: absolute on the child element, made the orange div appear above the image while maintaining the border-radius concealing the child element.

http://jsfiddle.net/nq9Jv/4/

Is that what you want?

Upvotes: 2

Related Questions