title: Position sticky not working in IE or Safari
body: <p>I am creating a card in CSS. It works perfectly fine in Chrome but doesn't work in IE/Safari browser.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#nb {
      position: sticky;
      width: 280px;
      height: 450px;
      margin: 0 auto;
      overflow: hidden;
      text-align: center;
  }
  #nb:hover:after {
      background: #f79031!important;
  }
  #nb::after {
      content: '';
      position: absolute;
      width: 940%;
      height: 100%;
      top: 170px;
      right: -502%;
      background: #ffffff;
      transform-origin: 54% 0;
      transform: rotate(129deg);
      z-index: -1;
  }
  
  #nb h5{text-align: left;
  line-height: 25px;
  padding-left: 7%;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="nb"&gt;
   &lt;a href="http://www.wissentechnology.com/banking-financial/"&gt;&lt;img
    class="bimg"
    src="https://wissen-kenvent.rhcloud.com/wp-content/uploads/2017/05/Banking-Financial.jpg"
    style="width: 100%;" /&gt;
    &lt;h5 style="font-size: x-large; color: #000000; padding-top: 15px;"&gt;Banking
     &amp; Finance&lt;/h5&gt;
    &lt;h4
     style="color: #000000; padding-top: 15px; text-align: justify; padding-left: 7%; padding-right: 7%;"&gt;We
     bring the right mix of domain and technical expertise to help you
     take emerging imperatives head on and translate them to competitive
     advantage.&lt;/h4&gt; &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Created a <a href="https://jsfiddle.net/w7uszgry/" rel="nofollow noreferrer">JSFiddle</a></p>