CODEWITHSUNDEEP
z-indexcss
01jayss
01jayss

Reputation: 1449

How do I prevent box shadow from showing over another element?

So I've run into this problem a lot but not until a recent project did it bug me immensely.

<div style="background-image:url(img/s_top_ribbon_terminal.png); height:6px;"></div>

<div style="background-color:#FFF; box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px; -moz-box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px; -webkit-box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px;">Lorem Ipsum</div>Lorem Ipsum

Basically, the situation goes: I have an element with an image or text that goes before another element which incorporates box shadow. The box shadow would then proceed to go over the first element, when I want the first element to be "in front of" (if that makes sense) the second element's shadow. How would I be able to do that? I tried z-index, but that didn't really seem to work?

Upvotes: 1

Views: 3072

Answers (1)

John Green
John Green

Reputation: 13435

z-index will work. Make sure to utilize positioning (absolute, relative, or fixed) on the elements.

Upvotes: 5

Related Questions