html - How can I make a div with a box-shadow overlay its h1 child element? -
i have div box-shadow
, h1
inside, shadow doesn't cover h1
here code:
h1 { position: absolute; top: 50%; left: 44%; -webkit-transform: translate(-44%, -50%); transform: translate(-44%, -50%); margin: 0; font-size: 120px; text-align: center; } #div{ width:100%; box-shadow:inset 0 0 0 1000px rgba(255,0,0,0.5); height:400px; }
<div id="div"><h1>hi</h1></div>
it appears question want div
shadow cover h1
.
to accomplish apply negative z-index
h1
.
h1 { z-index: -1; }
demo: http://jsfiddle.net/rzhfqb5y/
the shadow covers h1
.
Comments
Post a Comment