The CSS3 box-shadow lacks a sense of dimension

I'm having trouble adding depth to a header div using CSS box-shadow. No matter what I try, all I get is a flat line instead of the desired shadow effect. I've experimented with different colors, but nothing seems to work. Any suggestions on how to fix this issue?

Image:

HTML:

<div id="wrapper">
 <div id="header-wrapper">
      <div id="header">
           ......
      </div>
 </div>
 <div id="slider-wrapper">
       <div id="slider">
        .....
       </div>
 </div>
</div>

CSS:

 div#wrapper {
    position: relative;
 } 
 div#header-wrapper {
    z-index: 1;
    height: 125px;
    min-width: 100%;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f0f0f0));
    background-image: -webkit-linear-gradient(top, #ffffff, #f0f0f0); 
    background-image:    -moz-linear-gradient(top, #ffffff, #f0f0f0);
    background-image:     -ms-linear-gradient(top, #ffffff, #f0f0f0);
    background-image:      -o-linear-gradient(top, #ffffff, #f0f0f0);
    box-shadow: 0px 5px 5px 5px #c6c6c6;
  }
  div#slider-wrapper {  
    margin-top: 5px;
    z-index: -1;
    min-width: 100%;
    background-color: #f6f6f6;  
   }

Answer №1

To create a shadow over the image, apply a z-index to the div containing the image.

While you already have a z-index property, it only works on positioned elements.

Solution: add position:relative to div#slider-wrapper.

View the fiddle for more information.

Edit: For more official information, refer to this link. It does not explain the reasoning behind why the element needs to be positioned. Unpositioned elements also have a stacking order. If you have any insights on the reason, please share.

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

Can we make one tab disappear when another tab is clicked in Ionic 2 app menu icon?

I am working on a project using Ionic 2 and I have implemented multiple tabs in the application. However, I need to find a way to hide the top tab when the user clicks on the bottom tabs menu icon. Here is my Plunker for your reference. My goal is to ma ...

How can I modify the custom CSS to adjust the color of a Font Awesome icon?

Hello everyone! I am new to coding and I have a question for the Stack Overflow community. I am trying to customize the color of my Font Awesome icons on the homepage of my WordPress theme (Arcade Pro) using the custom CSS editor. Can anyone provide me w ...

Adhesive Bottom Navigation, Top Banner, and Full-Height Page Content

Trying to create a header, sticky footer, and content section with 100% height, but facing issues with the middle height. Below is the code and jsfiddles provided. Using HTML 4.0 strict in IE7 without the option to change. jsfiddle without 100% height: ht ...

Dynamically extract key values from JSON data and display them on an HTML page with checkboxes for selection. Generate a new JSON object containing

I am facing the challenge of parsing an unknown JSON with uncertain key-value pairs. As I do not have prior knowledge of the keys to access, my goal is to traverse through every key in the JSON and display all keys and their corresponding values on the scr ...

Is it possible to extract data from a table by adjusting Javascript in the inspector tool? The page is only showing today's data, but I'm interested in retrieving historical data by going back

My Desired Action: I am interested in extracting data from the 2nd and 3rd tables on this page. However, the data displayed is specific to the current 'day'. I wish to access readings from September 1st and import them into a Google Sheet. Speci ...

Encountering a problem with quintus-all.js and need assistance

I am having an issue with my animation code. Can someone help me troubleshoot it? window.addEventListener('load', function(){ var Q =window.Q= Quintus().include("Sprites, Scenes,2D, Anim").setup({maximize:true}); Q.Sprite.extend(&apos ...

In a responsive design, rearrange a 3-column layout so that the 3rd column is shifted onto or above the

My question is concise and to the point. Despite searching online, I have not been able to find any information on this topic. Currently, my layout consists of 3 columns: ---------------------------- |left|the-main-column|right| ------------------------- ...

Setting a fixed time for a preloader is a simple and effective way to

Is there a way to specify a specific duration for the preloader on my website? I find that after the images have preloaded, I am unable to see any animations in the home section. $(window).load(function() { $('#preloader').fadeOut( ...

Struggling with rendering an HTML element utilizing jQuery's attribute functionality, encountering issues exclusively in Internet Explorer version

I need assistance with generating and inserting an HTML element using jQuery. In my code, I am including a class attribute for the element as shown below: jQuery('<li></li>', { class: "myClass" }); However, when testing in IE ...

Navigating tables with Selenium WebDriver

I am struggling to locate and interact with a specific element in a table using Selenium WebDriver. The issue is that the table IDs are constantly changing, making it difficult for me to click on the desired element. For instance, consider the following t ...

Ways to automatically insert an icon within a textarea

While attempting to insert an image inside a textarea, I discovered that it seems impossible without using the contenteditable ="true" attribute of a textarea. However, upon visiting the diaspora site, I found out that this can indeed be achieved. I am uns ...

Attempting to Create a New User and Display the Resulting Page Using JavaScript and Handlebars Templates

I've implemented a form that allows users to input data. https://i.sstatic.net/prh11.png Once the user hits "Add User", they are successfully added to the database. However, instead of transitioning to the next page as expected, the form remains popu ...

Jade not displaying HTML content

I am currently in the process of developing a website using node.js, express, angular.js, and jade. As I experiment with html tags in my blog posts, I have encountered an issue where the tags do not seem to be functioning properly. My primary focus at the ...

Successfully transferring canvas image to server. Saving empty picture file

I have a piece of code that creates an image from an equation editor when the save button is clicked and displays it on a canvas. However, after displaying it, I am having trouble saving it as the saved image appears blank. Can someone please help me ident ...

What causes the entire set of dynamically created cards to collapse when using the toggle collapse button in ngb-bootstrap's Collapse control?

I am currently implementing the ngb-bootstrap collapse feature in my Angular 9 application. Incorporating the ngb-bootstrap collapse functionality within a Bootstrap card, I have multiple cards being generated. Each card is equipped with a collapse button ...

Ways to choose a distant relative in XML using XPath

To target all direct <p>...</p> elements inside a div, the selector would be div/p If I wish to select all second-level nested <p>...</p> tags within a div, I could use div/*/p Can a specific range be specified instead? div/descen ...

Step-by-step guide on arranging/placing/styling two div elements next to each other

I'm facing an issue with my CSS and HTML. I can't seem to get the 2 footer items to display on the same line. Is there a problem with how I've structured my divs and styles? Any suggestions for improving the code are greatly appreciated. I& ...

Are you in search of an opening <html> tag for your project?

When I use Initializer to quickly generate HTML5 + Boostrap boilerplates, I noticed that the HTML document it creates does not include an opening <html> tag. This got me curious. Here is the beginning portion of the code generated by Initializr: &l ...

What is the best way to center align the button on my card?

I am having trouble aligning the "Check Github" button in the center of the card. I have tried using item-align: center;, justify-content:center;, and margin-right: 50px; but none of them seem to work on this particular element. Can you please provide guid ...

JavaScript math validations not functioning correctly

This new project I've been working on involves presenting a multiplication problem and notifying the user if their answer is correct through an alert. The issue arises when the program incorrectly verifies the answers. Take a look at the code: < ...