This is the second installment of a collection of short summaries of the solutions that I found to bugs in my code. I want to document some of these solutions for my own sanity (so I can remember challenges that I've overcome in the past), and in the hopes that someone googling for an answer in the future will find their own solution more quickly this way. I'll include a few keyword and phrasing variations that someone might use in their search.
BUG:
"why no box shadow" or "box shadow missing on header" or "can't see box shadow" or "css no box shadow on div" or "box-shadow no effect"
Detailed Description:
Super straightforward. I wanted a typical box-shadow on the header for a design that I was working on tonight, and it just wasn't showing up.
Experiments:
I added a border to the header, and that worked, fine.
I added the same box-shadow to other elements, which also worked fine, and ruled out a syntax error.
I backtracked and noticed that my original mobile header did show a shadow under the header, but not after responsive design changes for a desktop format. I began googling, which led me to try a few more things that didn't work as I intended.
Solution:
Thorough Explanation:
A longer answer isn't really required, but here is a video for more on z-indexes if you are thirsty for knowledge.
Takeaway:
Background images can cover up box shadows. Raising a div in the visual hierarchy with a z-index can plop it back on top, revealing the drop shadow that was working but hidden. To use a z-index, an element must have fixed, absolute, or relative positioning as opposed to the default static setting. The specific number 10 was arbitrary, in this case, and 2 or 1000 would also work just fine.
So,
position: relative;
z-index: 10;
is the code that fixed my problem.
Top comments (0)