CSS: Why background-color breaks/removes the box-shadow?

Question

I have a pretty simple div structure - tree boxes with middle box highlighted with box-shadow:

.offerBox {
  width: 300px;
  margin: 10px;
}

.obOffer {
  width: 33%;
  float: left;
  height: 100px;
  text-align: center;
}

.obOfferPrice {
  padding: 10px;
  color: white;
  background-color: #85AADD;
}

.obHiLight {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

<div class="offerBox">
  <div class="obOffer">
    <div class="obOfferTitle">Free</div>
    <div class="obOfferPrice">Free</div>
  </div>
  <div class="obOffer obHiLight">
    <div class="obOfferTitle">Title</div>
    <div class="obOfferPrice">$10</div>
  </div>
  <div class="obOffer">
    <div class="obOfferTitle">Title 2</div>
    <div class="obOfferPrice">$10</div>
  </div>
</div>

One of the elements inside those boxes have a background-color property set. For some reasons this background-color removes the box-shadow from the right and only from the right.

Any ideas why and how to fix it?

Live Example of the problem: http://jsfiddle.net/SqvUd/

Simon Arnold · Accepted Answer · 2023-02-15T21:24:27.583

42

You just need to add z-index and position:relative;
See the example:

.offerBox { 
  border-radius: 6px; 
  width: 300px; 
  margin: 10px; 
}

.obOffer {
  position: relative; //  this
  width: 33%; 
  float: left;
  height: 100px; 
  text-align: center; 
  z-index: 0;
}

.obOfferPrice {
  padding: 10px;   
  color: white;
  background-color: #85AADD; 
}

.obHiLight {
  z-index: 10;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

<div class="offerBox">
  <div class="obOffer">
    <div class="obOfferTitle">Free</div>    
    <div class="obOfferPrice">Free</div>    
  </div>
  <div class="obOffer obHiLight">
    <div class="obOfferTitle">Title</div>    
    <div class="obOfferPrice">$10</div>    
  </div>
  <div class="obOffer">
    <div class="obOfferTitle">Title 2</div>    
    <div class="obOfferPrice">$10</div>    
  </div>
</div>

edited Feb 15 '23 at 21:24

answered May 14 '12 at 17:01

Simon Arnold

15,849
7
67
85

3

Thanks, I tried z-index, but haven't thought about position:relative; It does fix the problem. – Okapy May 14 '12 at 17:20
2

Using `position: relative;` solved this for me as well! Much thanks, it was driving me crazy trying to solve this. – Dan L Mar 13 '17 at 16:11
1

Any ideas on doing this for a table element, where position doesn't have any effect? In my use-case, I want a to have box shadow, but the rows also have a hover-effect that changes the background-color. When the rows around the box-shadowed row are hovered, they override the shadow on that side (top or bottom) – ItJustWerks Apr 07 '17 at 17:20
@ItJustWerks Just wondering if you found a solution to your issue? Im facing the exact same thing – Brian Tacker Oct 05 '18 at 17:36
What is the reason why `position: relative;` helps here? – andrescmasmas May 23 '22 at 22:37
1

@AndresEscobar each element has what we call a layout mode _(flow, positionned, flexbox, grid or table)_. Those modes specify witch properties are available and how they should be interpreted by the browser. By default, each element use the flow layout mode. This mode doesn't support z-index, but the positionned mode does. So we can switch from the flow mode to the positionned mode by setting the CSS property `position` to anything _(except static)_, and than we will have access to the z-index property. – Simon Arnold Jul 06 '22 at 00:08

score 8 · Answer 2 · answered May 14 '12 at 17:03

8

It has to do with the z-index of the items. Try adding this to your existing css:

.obOffer {
    position: relative;
    z-index: 10;
}

.obHiLight {
    position:relative;
    z-index: 100;
}

answered May 14 '12 at 17:03

JamesOR

1,138
1
6
15

score 3 · Answer 3 · answered Aug 18 '19 at 14:17

3

adding .obHiLight{opacity:0.999} creates a new stacking context for that element, which makes it appear above the others as well. This might work for tables too (didn't test :) . @ItJustWerks @brian-tacker

answered Aug 18 '19 at 14:17

Esger

1,310
12
18

CSS: Why background-color breaks/removes the box-shadow?

3 Answers3

Linked

Related