Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Box Shadow on a div gets hidden by other divs

Tags:

I have two boxes, they are stacked vertically. I want the top div to have a box shadow on its bottom edge. The top box's shadow is hidden behind the bottom box.

How do I fix this?

like image 960
Don P Avatar asked Feb 18 '12 16:02

Don P


People also ask

How do I move a box shadow in CSS?

You need to split your code into an outer and an inner DIV and only apply the drop shadow to the inner div. You would need two elements each with their own box-shadow and the triangle 'element' would need to be transformed.

Can you have multiple box shadows in CSS?

You can comma separate box-shadow any many times as you like.

Which CSS property attaches one or more drop shadows to the box?

The 'box-shadow' property. The 'box-shadow' property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional ''inset'' keyword.


2 Answers

You can use:

either

#first{     position:relative;     z-index:2; } 

or

#second{     margin-top:10px; } 

PS: Sorry for the previous answer mistakes. - Example shown: http://jsfiddle.net/fdezluis96/FRQKA/

Good luck!

like image 120
Luis Avatar answered Sep 19 '22 17:09

Luis


Or just add a margin-bottom: 10px or something to top div

like image 28
jribeiro Avatar answered Sep 22 '22 17:09

jribeiro