title: why does box-shadow disappear for a div when i remove the relative position for the div?
body: <p>i have a top_div which when set to relative position box shadow retains. and when i remove relative position box shadow disappears. could someone help me understanding this or where am i going wrong.</p>
  
  <p>Below is the code,</p>
  
  <pre><code>&lt;div class="top_div"&gt;
      &lt;div class="drawer"&gt;
          &lt;div class="menu"&gt;
              &lt;header&gt;
                  &lt;Svg&gt;
                  &lt;button&gt;&lt;/button&gt;
              &lt;/header&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  
  
  .top_div {
      z-index: 1;
      display: flex;
      position: relative;
      width: 100%;
      height: 48px;
      padding: 0 12px 0 12px;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
      align-items: center;
   }
  .drawer {
      display: flex;
      flex-direction: column;
      background-color: $white;
      position: absolute;
      width: 380px;
      top: 55px;
      right: 8px;
      min-height: 40%;
      max-height: 80%;
  
      header {
          height: 41px;
          border-bottom: 1px solid #CCCCCC;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-right: 0px;
          padding-top: 2px;
  
          svg {
              margin-left: 16px; 
          }
      }
  
      ul {
         overflow-x: hidden;
      }}} 
  </code></pre>