Weird CSS effect with box shadows - how to solve?


Tags: html,css,z-index,box-shadow

Problem :

See this example:

enter image description here

I have several boxes with white background and huge black, translucent box shadows that overlap the boxes above. However, this leads to an irritating behavior: While the white background gets darker through the overlapping box shadows, nested objects, like text or other boxes, don't!

Could anybody tell me why this occurs? I guess it has something to do with z-index. I would like prevent this - the nested objects should become darker as well. Any solutions?

Thanks in advance!


Here's the code: https://jsfiddle.net/xq20hvp4/3/

<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>

CSS:

div {
    margin: 20px;
    box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.3);
    font-size: 25px;
    color: red;
    font-weight: bold;
    font-family: Consolas, Arial, sans-serif;
    background-color: #ffffff;
}
div span {
    background-color: #e7e7e7;
    color: #555555;
    font-weight: normal;
    font-size: 17px;
    padding: 1px 5px;
}


Solution :

It's because those elements are on top of the div with the shadow. In order to put them behind, you can use position: relative; on the background element and give it z-index: 1:

div {
  margin: 20px;
  box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.3);
  font-size: 25px;
  color: red;
  font-weight: bold;
  font-family: Consolas, Arial, sans-serif;
  background-color: #ffffff;

  /* Add this */
  position: relative;
  z-index: 1;
}

div .box {
  background-color: #e7e7e7;
  color: #555555;
  font-weight: normal;
  font-size: 17px;
  padding: 1px 5px;
}

Here's an updated fiddle: https://jsfiddle.net/6wwz8usw/.


    CSS Howto..

    How to append an
  • to a
      and set css on the
    • at the same time with jquery
  • How to use images for check boxes using CSS or may be Javascript?

    How do you vertically align the body tag of an HTML document?

    How to have a common header and footer in a HTML CSS web app?

    show button instead of menu bar when browser resize in css/html [closed]

    In CSS, how to compute the percentage height within a `height:auto` parent?

    How to colorize an image in CSS?

    How to put a div in more pages

    How can I escape string css in sass/scss?

    How to make my first-child in css work properly?

    How to apply styles to a group of Labels in javafx without css

    How to create a dropdown with lu and li tags like this

    How do I return the box height to original state when clicked again in JQuery?

    How do you set a div's location to be centered when we don't know the screen size?

    How to display an image in the right upper corner of an input box

    How to Obtain Contents of HTML Element in CSS

    How to scale down retina image sprite with css

    Asset Pipline, how to add image path to background: url()?

    How to make height squeeze with css

    css rules multi class, how to match two out of many

    How to Change main menu color?

    How can I get the second line of text to hide and show on hover? CSS only

    How can I make this kind of a border?

    How to prevent CSS block elements from affecting parent inline-blocks

    How to define the css :focus state in a jQuery selector?

    how to use jquery closest function

    How to display html with css stylesheet in TextView?

    Slideshow won't accept fixed height

    How to make an text float next to an image in HTML/CSS?

    Linkedin Follow Button not showing properly in Firefox