How to return the shadow?

Question

css

I found an example of a shadow in Google, made it - it works, but only if the main-container does not have the backgroud property set.
Question one - how to make the shadow appear?
Question two - how to make the shadow appear without changing the code of the shadow itself?
Question three - who would be more correct to change the code so that the shadow appears?
Here is an example on jsfiddle , below is the code (comment out the background property of .main-container and the desired shadow will appear)-

<div class="main-container">
    <div class="container dropshadow"></div>
</div>

.main-container {
  width: 100vw;
  height: 100vh;
  background: #ffffff;
}

.container {
  width: 200px;
  height: 70%;
  margin: 0 auto;
}

.dropshadow {
  position: relative;
  padding: 1em;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.dropshadow::before, .dropshadow::after {
  content: "";
  position: absolute !important;
  z-index: -2;
}
.dropshadow::before {
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  border-radius: 10px/100px;
}

Answer 1

The fact is that your dropshadow class contains a z-index property equal to -2, which determines its position lower than the main-container, whose default position is 0. The background is drawn higher than the shadow and, as it were, overlaps it. To fix this, add to the main-container a z-index less than the dropshadow and add a position equal to absolute to apply the dropshadow.
https://jsfiddle.net/h73x5syv/7/
Here is the rewritten .main-container

.main-container {
  width: 100vw;
  height: 100vh;
  background:#00ffff;
  z-index:-5;
  position:absolute;
}