<div class="container">
  <h1>I am a sticky title. Scroll Down to see me Stick!</h1>
  <p>
    The heading above me is sticky. When u scroll down, it will get fixed to the top of the viewport once its edge hits that of the viewport.
  </p>
  <p>
    The green box on the right is always fixed relative to the viewport no matter now much u scroll vertically and/or horizontally.
  </p>
  <p>
    The following two containers demonstrate relative and absolute positioning.
  </p>
  <div class="element">
    <p>The following image has been relatively positioned <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/position/smiley.jpg" alt="">and shifted from its position by 25px upwards and 250px to the right.</p>
    <p>
      Its original position in the flow is preserved, and it overlaps surrounding elements since there is not enough margin between them.
    </p>
  </div>
  <div class="context">
    <div class="absolute"></div>
    <p>I have established a positioning context for my descendants by getting <code>position: relative</code>. My pink square child is positioned absolutely 20px from the bottom and 10px outside my boundaries by using <code>right: -20px</code>. It is removed from my normal content flow and can overlap elements beneath it.</p>
    <p>
      <strong>Try changing the offset values and stretching the pink box horizontally and vertically.</strong>
    </p>
  </div>

  <div class="fixed">
    I am always fixed relative to the viewport!
  </div>

  <div class="context context-2">
    <div class="absolute-stretch"></div>
    <p>
      My absolutely positioned element is stretched horizontally using the horizontal offset properties <code>left</code> and <code>right</code>. It also has a height value set. It is positioned at the bottom using the <code>bottom</code> property. Because it has a spefiied height, if you specify a top offset using the <code>top</code> property, it will be moved to my top because the <code>top</code> property wins.
    </p>
    <p>
      Try adding a top offset, to see how it is repositioned. Then, try removing the specified height to see how it stretches vertically to fill the vertical space. Try changing the width and horizontal offsets to see how that changes it, too.
    </p>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  border: 2px solid grey;
}

h1 {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  padding: 10px;
  z-index: 1;
  background-color: #333;
  color: white;
}

p img {
  /* establish positioning context */
  /* shift position from original position */

  position: relative;
  top: -25px;
  right: -25px;
}

.context {
  /* general styles */

  border: 2px solid grey;
  min-height: 200px;
  margin-top: 30px;
  padding: 20px;
  /* establish positioning context */

  position: relative;
}

.absolute {
  /* general styles */

  height: 150px;
  width: 150px;
  background-color: deepPink;
  color: white;
  padding: 10px;
  opacity: .8;
  /* position absolutely */

  position: absolute;
  bottom: 20px;
  right: -20px;
}

.fixed {
  color: white;
  background-color: #009966;
  padding: 20px;
  width: 200px;
  position: fixed;
  bottom: 50px;
  left: 50px;
  z-index: 3;
}

.context-2 {
  min-height: 330px;
}

.absolute-stretch {
  background-color: deepPink;
  opacity: .75;
  /* play with these values */

  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /*top: 0;*/
  /* uncomment this value and then comment the height value to see how the element changes */
}