CSS3 preserve internal box shadow with child elements?

Question

Have a look at this: http://jsfiddle.net/6Yq8b/78/

Is there a way I can preserve a Div's internal box shadow when child elements move outside its boundaries? In the given link, what happens is the child element ("toplid") is obscuring the internal box shadow on the top of the box...

Ideas?

Answer 1

You can simulate the box shadow on the #toplid element by applying an inset box shadow on it:

#toplid {
  box-shadow: inset 0 80px 42px -2px black;
}

http://jsfiddle.net/6Yq8b/86/

---

EDIT:

You already have box-shadow set on that element, so use multiple box-shadows:

#toplid {
  box-shadow:0 0 20px -2px black, inset 0 80px 42px -2px black;
}

http://jsfiddle.net/6Yq8b/87/