title: How to make an element sticky?
body: <p>I have purchased a theme with a sticky button and I am trying to amend the CSS to leave the element in the bottom right of the screen. But the code currently places in the element in the right position for the fold but once I scroll past the fold it scrolls away. </p>
  
  <p>I have adjusted the position to sticky but it keeps pushing the element into the header of the page.</p>
  
  <p>CSS</p>
  
  <pre><code>.fy-slideshow-badge {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 80px;
      right: -20px;
      width: 200px;
      height: 200px;
      padding: 40px;
      z-index: 70;
      font-family: "Quicksand", Arial, Helvetica, sans-serif;
      font-size: 18px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      line-height: normal;
      text-align: center;
      -ms-word-wrap: break-word;
      word-wrap: break-word;
      color: #fff;
      background-color: #c84646;
      border-radius: 50%;
      user-select: none;
      transition: all 0.4s ease 0s;
      box-shadow: 0 3px 20px rgba(0,0,0,0.15);
  }
  </code></pre>
  
  <p>Here is the link to the current result</p>
  
  <p><a href="http://ci-staging.co.uk/MarinaClubVW/" rel="nofollow noreferrer">http://ci-staging.co.uk/MarinaClubVW/</a></p>