JSFiddle - React, Tailwind, and code Playground

by kaljak

HTML

<div class="scroll">
  <div class="fixed">
    <div class="fixedinner">
      FIXED FIXED FIXEDFIXEDFIXEDFIXEDFIXEDFIXEDFIXED
    </div>
  </div>
  <div class="long">
    asdfjlaskfj asldkfjslakdfjaskldfj asdklfj asf asdf
  </div>
</div>

CSS

.scroll {
  background: yellow;
  width: 300px;
  height: 300px;
  overflow-y: auto;
  position: relative;
  
}

.long {
  width: 500px;
  height: 100px;
  background: red;
  margin-top: 50px;
}

.fixed {
  position: fixed;
}

.fixedinner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10001;
  height: 20px;
  width: 100px;
  background: green;
}