How Can I Make Everything Outside Of A Div Darker?

I've got a cart drawer that opens from the right on click. I'd like for everything outside of it to become darker when it is opened such that only the div (cart drawer) is focused.

Solution 1:

Basicly, a hudge shadow might do :(click any numbered divs to darken what's around it)

Edit from your comment, i would propose: .cart-container{box-shadow:0 0 0 2000px rgba(0,0,0,0.5);} demo below for effect it can have.

div:focus {
  position:relative;/* bring on top;*/
  box-shadow:0 0 0 1600px rgba(0,0,0,0.65);/* dark around it */
}

/* demo purpose*/
body {
  display: flex;
  flex-wrap: wrap;
  counter-reset: divs -1;
  margin:0;
}
div {
  counter-increment: divs;
  height: 120px;
  width: 120px;
  background: turquoise;
}
div:nth-child(odd) {
  background: tomato;
}
div:not(:first-of-type):before {
  content: counter(divs);
  display: block;
  font-size: 2em;
  margin: 1em;
  color: white;
}

<div>tabindex for demo catches click, but not me. <b>switch light back on</b></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>

a mask in fixed position can also be used to catch any click outside it:

div.toShowTop {
  position: relative;
  z-index: 1;
  /* bring on top;*/
  box-shadow: 0 0 0 1600px rgba(0, 0, 0, 0.65);
  /* dark around it */
}
div.toShowTop ~.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50px;/* to see effect */
  background: rgba(0, 0, 0, 0.5);
}
body div.toShowTop {
  background: yellow;
  order: 1;
}
div:nth-child(8)~div {
  order: 2
}
/* demo purpose*/

body {
  display: flex;
  flex-wrap: wrap;
  counter-reset: divs -1;
  margin: 0;
}
div {
  counter-increment: divs;
  height: 120px;
  width: 120px;
  background: turquoise;
  cursor: pointer;
}
div:nth-child(odd) {
  background: tomato;
}
div:not(:first-of-type):before {
  content: counter(divs);
  display: block;
  font-size: 2em;
  margin: 1em;
  color: white;
}

<div tabindex="0" class="toShowTop">div to show</div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<b class="mask"></b>
<!-- can be generated via js -->

You may also use a pseudo from another element to avoid extra markup:

div.toShowTop {
  position:relative;
  z-index:1;/* bring on top;*/
}
div.toShowTop  + div:after {
  content:'';
  position:fixed;
  top:0;
  bottom:0;
  right:0;
  left:50px;
  background:rgba(0,0,0,0.75);
  cursor:auto;
}
body div.toShowTop {
  background:yellow;
  order:1;}
div:nth-child(8)~div {order:2}
/* demo purpose*/
body {
  display: flex;
  flex-wrap: wrap;
  counter-reset: divs -1;
  margin:0;
}
div {
  counter-increment: divs;
  height: 120px;
  width: 120px;
  background: turquoise;
  cursor:pointer;
  
}
div:nth-child(odd) {
  background: tomato;
}
div:not(:first-of-type):before {
  content: counter(divs);
  display: block;
  font-size: 2em;
  margin: 1em;
  color: white;
}

<div tabindex="0" class="toShowTop"> div to show </div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>

Solution 2:

You can do it with a pseudo element...

div {
  background: #fff;
}

div:after {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  background: rgba(0,0,0,0.8);
  content: '';
  z-index: -1;
}

<div>div</div>

But a better solution might be to create a separate element that serves as the background/mask. This will give you more control over the layout.

section {
  background: white;
}

.mask {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 1;
}

.show {
  position: relative;
  z-index: 2;
}

<section>section</section>

<section class="show">show this</section>

<section>section</section>

<div class="mask"></div>