<div class="example">
  <span class="box">box</span>
  <span class="box static">static</span>
  <span class="box">box</span>
</div>

<div class="example">
  <span class="box">box</span>
  <span class="box relative">relative</span>
  <span class="box">box</span>
</div>

<div class="example">
  <span class="box">box</span>
  <span class="box absolute">Absolute</span>
  <span class="box">box</span>
</div>

<div class="example">
  <span class="box">box</span>
  <span class="box fixed">Fixed</span>
  <span class="box">box</span>
</div>

 <div class="box sticky">Sticky</div>


<div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div>

.example {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.box {
  margin: 20px;
  width: 150px;
  height: 50px;
  background: linear-gradient(to right, #232526, #414345); /* Chrome 10-25, Safari 5.1-6 */
  color: white;
  text-align: center;
}
.relative {
  position: relative;
    right: 30px;
  left: 30px;
  top: 10px;
  bottom: 20px;
}

.absolute {
  position: absolute;
  left: 5%;
  top: 200;
}

.fixed {
  position: fixed;
  top:0;
  right: 10%;
}

.sticky {
    left: 20%;
    top: 0;
    position: -webkit-sticky;
    position: sticky;
    align-self: flex-start;
    margin: 20px;
  width: 150px;
  height: 50px;
  background: linear-gradient(to right, #232526, #414345); /* Chrome 10-25, Safari 5.1-6 */
  color: white;
  text-align: center;
}