JSFiddle - React, Tailwind, and code Playground

by oakley808

HTML

<div class="wrapper">
  <div class="fixed-wrapper">
    <div class="fixed">
      Content in here will be fixed position, but 240px to the left of the site body. d
    </div>
  </div>
</div>

CSS

/* Main site body */
.wrapper {
  width: 940px;
  margin: 0 auto;
  position: relative; /* Ensure absolute positioned child elements are relative to this */
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
  width: 220px;
  position: absolute;
  top: 0;
  left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
  width: 220px;
  position: fixed;
  /* Do not set top / left! */
}