<container>
  <div>static</div> 
  <fixed>fixed</fixed>
  <sticky>sticky</sticky>
  <div>static</div>
  <div>static</div>
  <div>static</div>
</container>
<box/>
container {
  width: 500px;
  height: 300px;
  background-color: gray;
  display:flex;
}

div {
  display:flex;
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
  text-align:center;
  align-items:center;
  justify-content:center;
}

fixed {
  display:flex;
  position:fixed;
  width: 100px;
  height: 100px;
  background-color: green;
  border: 1px solid black;
  text-align:center;
  align-items:center;
  justify-content:center;
  top: 50px;
  left: 50px;
}

sticky {
  display:flex;
  position:sticky;
  width: 100px;
  height: 100px;
  background-color: orange;
  border: 1px solid black;
  text-align:center;
  align-items:center;
  justify-content:center;
  top: 50px;
  left: 150px;
}

box {
  width: 500px;
  height: 300px;
  background-color: pink;
  display:flex;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.