Is there a way to have a div element with a box-shadow effect on top of its h1 child element?

I am facing an issue where a div with a box-shadow and an h1 inside are not aligned properly, causing the shadow to not cover the h1 element.

Below is the code snippet in question:

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>
htmlcss

Answer №1

Your question suggests that you want the shadow of the div to overlap the h1.

To achieve this effect, simply assign a negative value to the z-index property of the h1.

h1 { z-index: -1; }

Check out the DEMO here: http://jsfiddle.net/rzhfqb5y/

Now, the shadow will cover the h1.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieving a 100% width input with Flexbox: Tips and tricks for success

Check out this flexbox form I created using bootstrap 4: https://jsfiddle.net/kkt0k2bs/1/ I have implemented a media query to adjust the form elements for smaller screens. For larger displays, I want the form items to be displayed inline. However, on sm ...

twitter-bootstrapcssflexboxtwitter-bootstrap-4

When trying to set the focus on the first item in a list using HTML and Angular, the focus unexpectedly shifts to the second

I've been tackling a UI requirement where the focus needs to be set on the first element of a list item constructed from an array of objects when the tab key is pressed for the first time. Subsequent tab key presses should cycle through the list items ...

htmlangulartypescripttabindex

Generate a loop specifically designed to execute the code following the menu in the script

My website has the code snippet below: let txt_com = document.querySelector(".text_user"); let num_com_user = document.querySelector(".massage_for_user"); txt_com.addEventListener("click", function() { if (this.classList.contains("num_com_user")) { ...

javascripthtmlcss

Attempting to implement form validation on my website

Recently watched a tutorial on basic form validation on YouTube, but I'm encountering an issue where the error messages from my JavaScript file are not displaying on the website during testing. I have set up the code to show error messages above the l ...

javascripthtmlbootstrap-5

Display fewer search results initially and have the option to view more when hovering

I am working with a PHP function that generates a ul element. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> I am looking to display the list in a li ...

phpjquerycsshtml-lists

Utilizing the Bootstrap grid system to seamlessly display images

I have been attempting to design a column that is divided into two nested columns, each containing images that should fill the entire height and width of their respective columns. However, I am facing an issue where the images are extending beyond the boun ...

htmlcsstwitter-bootstrap

What could be the reason for Material UI xs={12} not extending to the full width of a mobile screen?

click here for image On my mobile screen, my components should be taking up the entire width but they seem to have an invisible margin on the right. <React.Fragment> <CssBaseline /> <ThemeProvider theme={theme}> <Grid ...

cssreactjsmaterial-ui

What is the computed value of HTML and body?

Is there a specific reason why the body tag has a default margin while HTML does not? Could there be any practical explanation for this design choice? ...

htmlcss

Embedding images within written content

Is there a way to insert an image into text from a specific position without using tables? I'm looking for a method other than aligning the image "left or right". https://i.sstatic.net/8gvxk.png ...

htmlcss

Trouble with PHP and HTML Code not functioning properly after loop execution

I created a form with a dropdown menu that pulls options from a MYSQL Database. However, after fetching the options, the button and other components of the code seem to disappear. Everything else works fine when I comment out the PHP Query. <form acti ...

phphtmlmysqlformsbootstrap-4

The confusion between <g:if> and <g:set> features in Grails is causing some issues

I am working with a gsp template that includes a variable. If this variable is true, I want to add an extra button; if it's false, nothing should happen. What could be causing my code to not work correctly? <g:set var="removeButton">{{ removeB ...

htmlgrailsbuttonif-statement

Center a single div vertically within a parent div by utilizing a fluid layout

Attempting to align text elements within a responsive layout presents challenges due to the fluid nature of <div> sizes. I recently discovered a fantastic method for horizontally and vertically centering a child <div> inside its parent <div ...

htmlcsscenteringfluid-layout

Utilize jQuery to insert a span element inside a paragraph element before it is appended to the DOM

My current task involves utilizing jQuery DOM elements to insert a few paragraphs into a div. The following code accomplishes this successfully: $('#detail_overlay').append($('<p />', { "class" : "detail_txt" }) .text( $(' ...

jqueryhtmlcss

Enlarging the current division while reducing the size of the others when hovering

Currently, I am working on a school project that involves creating a slideshow on a webpage. However, I have reached a point where I am unsure of how to proceed. Here is the progress I have made so far: body { background-color: #252525; } #wrapper { ...

javascripthtmlcss

Getting started with html2canvas: A beginner's guide

So here's a seemingly simple question... I'm diving into new territory and stumbled upon http://html2canvas.hertzen.com with a straightforward tutorial. After successfully running the command npm install -g html2canvas, I hit a roadblock. Where e ...

javascripthtmlangularnpmhtml2canvas

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

I am facing an issue while attempting to create a basic CSS transition using JavaScript. The goal is for the start button to trigger the movement of an element, based on the duration of the keyframe animation. Then, clicking the end button should make the ...

javascripthtmlcsscss-transitionscss-animations

Send information from a web page's elements to PHP with the help of AJAX

My goal is to integrate AJAX, HTML, and PHP to create a seamless user experience. I am currently facing difficulty in passing variables to the PHP form. The method I've employed seems a bit complex, especially since this is my first attempt at using A ...

phpjavascripthtmlajax

The code snippet 'onload='setInterval("function()",1000)' is not functioning as expected

I need to continuously load the contents of an XML file into a specific HTML div every second. Here is the JavaScript code that I am using to parse the XML file: function fetchEntries() { if (window.XMLHttpRequest) req = new XMLHttpRequest(); ...

javascriptxmlajaxhtml

How can I ensure that my CSS code functions seamlessly across all versions of Internet Explorer from IE6 to the latest release?

I need a solution for getting this CSS code to function properly across all versions of Internet Explorer, from IE6 to the most recent version. body:first-child * { margin-top:0 !important; } body:last-child * { margin-bottom:0 !important; } Any ...

cssinternet-explorerckeditor

JavaScript program that continuously reads and retrieves the most recent data from a dynamically updating JSON file at regular intervals of every few seconds

I am a beginner in JavaScript and I'm facing an issue with displaying the most recent values from a .json file on an HTML page. The file is updated every 10 seconds, and I am also reading it every 10 seconds, but I'm not getting the latest data. ...

javascripthtmljsonajax