Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Box shadow on nested elements

Here's what I have so far: I have an h1 with a border inside a div. The div spans the width of the page, and it is the height of the h1's content area. The h1's padding makes it taller than the div. The h1 doesn't have a border, but it does have a border-radius of 50%, making it oval-shaped. Both elements have backgrounds, and together they make up the header of my page. Here's the problem: I applied a box shadow to both elements, to make my header appear to hover in front of the page. It's pretty much working like I want, except that the h1's shadow is between it and the div, making the h1 appear to hover in front of the div, instead of the header being in a flat rectangle-with-a-bulge shape. Finally, here's the question: Is there any way to either make the h1's shadow go behind the div, or achieve the same effect?

1 Answer

Cat Carbonell
Cat Carbonell
Courses Plus Student 8,899 Points

The issue is that you've added a box-shadow to a block element; h1, though text, is still counted as a block element. The only way you can make the shadow appear "behind" the H1 element is if you encase the h1 element inside another div, and apply the box shadow on the encasing div instead.

<div id="header">
<div id="second-header">
<h1>This is my Header</h1>
#header {
box-shadow: 10px 10px 5px #888;
border-radius: 50%;
border: 1px solid #000;
box-shadow: 3px 3px 5px #333;
border-radius: 50%;

A live example on JSfiddle: https://jsfiddle.net/nqkjkk7e/