JSFiddle - React, Tailwind, and code Playground

by jungwon12344

HTML

<div id="box">
<br><br><br><br>
  <div class="sticky">
    sticky
  </div>
  <div class="fixed">
    fixed
  </div>
</div>
<div class="sticky_b">
  sticky
</div>

CSS

body {
  height: 1000px;
}
#box {
  border: 3px solid black;
  display: inline-block;
  height: 300px;
  width: 300px;
}
.sticky,
.fixed,
.sticky_b {
  display: inline;
  padding: 5px;
  margin: 0 30px;
  border: 3px solid red;
}
.sticky,
.sticky_b {
  position: sticky;
  top: 0;
}
.fixed {
  position: fixed;
  top: 80px;
}