WebStorm 5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS Positioning</title>
</head>
<body>
    <div id="box-1" class="box"></div>
   <div id="cnt">
       <div id="box-2" class="box"></div>
       <div id="box-3" class="box"></div>
   </div>
    <div id="box-4" class="box"></div>
    <div id="box-5" class="box"></div>
</body>
</html>


body{
    height:4000px;
}
#cnt{
    position: relative;
    width: 500px;
    height: 500px;
    background: darkgray;

}
.box
{
    width: 100px;
    height: 100px;
}
#box-1{
    position: relative;
    top: 50px;
    left: 50px;
    background: red;
    z-index: 1;
}
#box-2{
    position: absolute;
    top: 100px;
    left: 100px;
    background: yellow;
}
#box-3{
    background: green;
}
#box-4{
    position: fixed;
    background: blue;
}
#box-5{
    position: sticky;
    top: 0;
    background: orange;
}