JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div class="relpos">

  <div class="fixedpos">
  </div>

</div>



<!-- This is just for readability -- it doesn't influence behavior: -->
<div class="marker">
  ^^ Teal div should extend to hereee
</div>

CSS

body {
  margin: 0
}

.relpos {
  position: fixed;
  overflow: auto;
  height: 100px;
  width: 100px;
  border: 2px solid orange;
  height: 100px;
}

.fixedpos {
  position: fixed;
  width: 200px;
  height: 200px;
  background: teal;
  border: 2px solid black;
}

.marker {
  position: absolute;
  top: 205px;
}