http://texcclaw.com/shadow/ is my example page
The green rectangles you see are divs with ::after rules applied. The divs are positioned relative, the ::after children are positions absolute. Z-indexes are set so that the ::after elements should display behind the green boxes as drop shadows but instead they display above the parent divs.
If I remove the z-index rule from the parent divs and also change line 105 of style.css (Baseline Reset normalize.css 2.1.2) from display:block to display:inline (example below), all works as I think it should. But changing line 105 messes up too much of the site structure (nav bar, etc.).
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
Anyway, what I’m trying to do is place various custom drop shadow effects without changing the HTML, only using CSS3 techniques to the current div structure. Any ideas on a fix for this Z-index issue?
.