A single div casting a shadow over another div

Imagine you have HTML code structured like this:

<div class="container">
   <div class="navbar">Navbar</div>
   <div class="body">Body</div>
</div>

and corresponding CSS styles:

.navbar {
    background-color: green;
    -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
}

.body {
    background-color: white;
}

However, due to the body element positioned above the navbar, the shadow effect is not visible. How can this issue be resolved?

htmlcss

Answer №2

Check out this example on jsFiddle

To create the desired effect, make sure to position your body and nav elements accordingly. You can adjust the z-index values as needed, giving a higher value to the nav element in this case.

.navbar {
    background-color: green;
    -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    position: relative;
    z-index: 10;
}

.body {
    position: relative;
    z-index: 0;
    background-color: white;
}

Answer №3

To make an important addition to the .navbar element, you can include the following CSS code:

CSS

 .navbar
    {
    background-color: green !important;
    -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    }

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

Tips for eliminating choices upon button press

How do I remove nested options inside a select element upon button click? I'm not sure where my mistake is, could it be in the for loop? var select = document.getElementById('colorSelect'); var options = document.getElementsByTagName(&ap ...

javascripthtml

Update the theme of angular library upon import

I am seeking information on how to create a common Angular library with custom styled components, such as size and font. My goal is to import this library into two separate projects, which I have successfully done so far. However, now I wish for each proj ...

javascriptcssangularsass

Combining BackgroundImage and Overlay in React for a Stylish Overlapping

I was looking to add a background overlay on my background image. Below is what I was trying to achieve: https://i.sstatic.net/NaZ6L.png Please take a look at my codesandbox as well Click here image: { backgroundImage: "linear-gradient(0 ...

cssreactjsmaterial-uireact-hooks

ReserveYourSpot: Effortless Seat Reservation with AngularJS at the Click of a Button [GIF]

ReserveYourSpot: An innovative AngularJS application designed to streamline the process of reserving seats for a movie show, similar to popular platforms like BookMyShow. https://i.stack.imgur.com/PZk1I.gif Interactive User Functions (Use Cases): A ...

javascripthtmlangularjsframeworkslogic

Smoothly transition the box shadow using CSS3's ease-in and ease-out effect

Struggling to achieve a smooth easing effect for a box shadow transition using CSS3. This is the current CSS code in use: #how-to-content-wrap-first:hover { -moz-box-shadow: 0px 0px 5px #1e1e1e; -webkit-box-shadow: 0px 0px 5px #1e1e1e; box-s ...

csshovercss-transitions

List application now includes the capability of adding three items in one go, rather than just one

Furthermore, when the script is placed in the same file as the html, it results in the addition of two items simultaneously instead of three. var itemNum = 1; $("document").ready(function() { $("#addCL").click(function() { var itemId ...

javascripthtmllistcheckbox

Attempted everything... Clicking away but a div refuses to show up post-click, resulting in an error message

When attempting to click a button, I encountered an error stating that the element is not clickable at point (1333, 75) as another element would receive the click. This issue arose while using Google Chrome version 65. <li class="slds-dropdown-trigge ...

javahtmlselenium

obtaining the value of a child attribute

On the inside view page, I have multiple div elements with IDs that begin with the prefix my-. <div id="my-div1"><img src="/img/1.jpg" /></div> <div id="my-div2"><img src="/img/2.jpg" /></div> <div id="my-div3">&l ...

javascriptjqueryhtml

Troubleshooting Display Problems when Switching Bootstrap Themes in ASP.NET MVC

I recently made changes to my MVC project by switching the default Bootstrap theme to Bootswatch - Cosmos. However, I am facing an issue with the Navbar as shown in the image below: View Header Display Issue Image Initially, I was using Bootstrap 3.0 and ...

cssasp.netasp.net-mvctwitter-bootstrapbootstrap-4

HTML - Retain placeholder text while user inputs

My input is structured like this: <input value="My text" placeholder="Placeholder"> Typing in the input causes the placeholder text to disappear, which is expected. However, I am looking to keep the placeholder text visible as a background behind ...

javascripthtmlcss

Locating HTML content using a regular expression and saving it in an array with PHP

I am looking to find specific strings in HTML code, such as: <div class="icon_star">&nbsp;</div> and <div class="icon_star"></div> or <div class="icon_star"> </div> The above strings need to be located within H ...

phphtmlregexpcre

My website is currently experiencing issues with all of the CSS references not working. This problem applies to both external and internal CSS files and consistently

I'm encountering 404 errors when trying to load both internal and external files on a website through my browser. My code snippet looks like this: <link rel="stylesheet" type = "text/css" href='anoceanofsky.css'/> Despite clearing m ...

cssref

issues with background image alignment in css

I attempted to add a sticky background to a div, which was successful. However, I am encountering an issue where the background does not stretch enough during scrolling. Below is the CSS code I used to apply the background, along with screenshots displayin ...

htmlcss

External CSS file unable to load background image as referenced

I am facing an issue with this code in my external CSS file as it doesn't seem to work at all. Strangely, when I move it internally, everything functions perfectly. Any thoughts on what could be causing this discrepancy? html { background-image:url(i ...

htmlcssrelative-path

Disable audio playback on tab unfocus using Javascript/HTML

Is there a way to automatically mute a tab or video when it is not in focus? As a beginner, I am unsure how to accomplish this task. The audio source is currently a webm file embedded within a <video> tag. ...

javascripthtmlhtml5-videohtml5-audio

Activate the parent navigation link when on sub-pages

I want to ensure that the parent navigation item is highlighted when a user is on a child page based on the URL. For example, if the user is currently viewing foo1-child and the parent is foo1, I need to apply the active class to Foo 1: http://foo.com/foo ...

javascriptjqueryhtmlcss

Make the mp3 file automatically download/save as by forcing the link

My website has links to mp3 files using normal <a href="file.mp3"> tags. However, many users with Apple Quicktime installed experience the mp3 files opening instead of saving when clicking on the links. Is there a way to force the browser to save t ...

c#javascripthtml

Troubleshooting a problem with the transition of the hamburger menu icon in SC

I'm encountering an issue with the transition property and attempting to utilize the all keyword. After including a fiddle, I can't seem to figure out if I've made a simple mistake or if there is something else going on. I have seen the all ...

htmlcsssass

How to vertically center a form element in Bootstrap 4

As a newbie to using bootstrap 4 for the first time, I expected vertical alignment of elements to be easy, especially with flex being touted as the simplest way to achieve this. The issue: Struggling to vertically align my form element within my navigatio ...

cssflexboxbootstrap-4twitter-bootstrap-4

Trigger click functions sequentially to display elements after specific actions are taken

Is there a way to make jQuery listen for clicks only at specific times? It seems that when I add event listeners, like $("#box").click(function(){, they are executing before the code above them finishes running. Let's say I have two boxes that should ...

javascriptjqueryhtmlcss