static: Default value. Elements render in order, as they appear in the document flow    

​

absolute: The element is positioned relative to its first positioned (not static) ancestor element  

​

fixed:  The element is positioned relative to the browser window    

​

relative: The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position   

​

sticky: The element is positioned based on the user's scroll position

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

initial: Sets this property to its default value. Read about initial    

​

inherit: Inherits this property from its parent element. Read about inherit

*/

​

html, body {

  margin: 0;

  padding: 0;

}

canvas {

  display: none;

}

​

.parent {

  position: relative;

  background: blue;

  width: 50%;

  height: 200vh; /*uncomment if .child-one position is fixed or sticky to see result*/

}

​

/* .child-one {

  position: absolute;

  top: 10px;

  left: 100px;

  background: green;

} */

​

/* .child-one {

  position: relative;

  top: 10px;

  left: 20px;

  background: green;

} */

​

/* .child-one {

  position: fixed;

  top: 10px;

  left: 20px;

  background: green;

} */

​

.child-one {

  position: sticky;

  top: 0px;

  left: 20px;

  background: green;

}

​

.child-two {

  background: red;

}

​

.child-three {

  background: purple;

}