Css3 drop shadow under another div, z-index not working

Master positioning & z-index

Make no mistake – the position property governs z-index. Without relative, absolute, fixed, or sticky, z-index would be ignored, and we wouldn't want that, would we?

Explicitly position your elements:

.floating-element {
  /* grounded no more! */
  position: relative;
  /* climbing the vertical ladder */
  z-index: 20; 
}


Avoid negative z-index values. They can lead the element far behind, creating stacking oddities. Helpful tip: positive thinking, positive indexes!

Enhance with box-shadow

box-shadow has its bag of tricks. Not merely a shadow effect, it can give depth, mimic natural light, or cut an inset effect.

To cast a shadow over another element:

.element {
  /* whispering some dark secrets */
  box-shadow: inset 0 8px 4px -4px #ddd; 
}


The inset keyword changes the shadow's boundary, giving an impression of carving into the content below.

Cross-browser friendliness

Compatibility is key to multinational diplomacy – and cross-browser CSS. Cater to different browsers:

.element {
  -webkit-box-shadow: 5px 5px 5px #000; /* waving at Safari and Chrome */
  -moz-box-shadow: 5px 5px 5px #000; /* howdy, Firefox! */
  box-shadow: 5px 5px 5px #000; /* catching all the rest */
}


Ain't nobody got time for shadow inequalities across browsers!

Adopt best practices

For clarity and compatibility tests, adopt descriptive classes and cross-check for browser compatibility.

Minimize complex z-index stacking - prefer simplicity over specificity. Keep in mind that drastic changes in the z-order might affect hover effects, modals and overlays can add to usability issues.

Importantly, always wear your debugger’s hat. Browser developer tools offer visual feedback which can demystify stacking order and z-index complexities.

Troubleshooting guide

Commonly faced issues include:

• Parent elements with an overflow property that chops off the shadow.
• z-index working relative to the closest positioned ancestor.
• Accidentally creating a new stacking context, hampering the expected z-index interaction.

Maintain clean code

Finally, ensure your CSS is manageable. Avoid undesired ranking or excessive stacking, keeping things net and keenly organized. This step aids in confronting future issues effectively.