Box shadow on nested elements

Question

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?

Answer 1 · 2015-12-28T07:45:11Z

December 28, 2015 7:45am

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>
</div>
</div>

#header {
box-shadow: 10px 10px 5px #888;
border-radius: 50%;
}
#second-header{
border: 1px solid #000;
box-shadow: 3px 3px 5px #333;
border-radius: 50%;
}

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

Welcome to the Treehouse Community

Looking to learn something new?

Megan Weber

Megan Weber

Box shadow on nested elements

1 Answer

Cat Carbonell

Cat Carbonell