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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -