Position: Fixed

Positions relative to viewport.

html

<div class="pf-wrap" role="img" aria-label="A mock browser viewport with scrollable content; the badge is fixed and stays pinned in the same corner while the content underneath scrolls">
  <div class="pf-viewport">
    <div class="pf-badge" style="top:10px;right:10px;background:#E8A020;">★ pinned</div>
    <div class="pf-content">
      <p>Scroll this area.</p>
      <p>The badge does not move with it.</p>
      <p>Line four of filler content.</p>
      <p>Line five of filler content.</p>
      <p>Line six of filler content.</p>
      <p>Line seven of filler content.</p>
    </div>
  </div>
  <p class="pf-caption">position: fixed; top: 10px; right: 10px &mdash; pinned to the viewport, ignores scrolling</p>
</div>
<style>
.pf-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }
.pf-viewport { position: relative; transform: translateZ(0); height: 150px; overflow: auto; background: #FAF7F2; border: 1.5px solid #24143055; border-radius: 8px; }
.pf-badge { position: fixed; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; box-shadow: 0 4px 10px rgba(36,20,48,.3); }
.pf-content { padding: 12px; }
.pf-content p { margin: 0 0 34px; font-size: 12px; }
.pf-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[300px]" role="img" aria-label="A mock browser viewport with scrollable content; the badge is fixed and stays pinned in the same corner while the content underneath scrolls">
  <div class="relative [transform:translateZ(0)] h-[150px] overflow-auto bg-[#FAF7F2] border-[1.5px] border-[#24143055] rounded-lg">
    <div class="fixed px-2.5 py-1.5 rounded-full text-[11px] font-bold shadow-lg" style="top:10px;right:10px;background:#E8A020;">★ pinned</div>
    <div class="p-3">
      <p class="mb-[34px] text-xs">Scroll this area.</p>
      <p class="mb-[34px] text-xs">The badge does not move with it.</p>
      <p class="mb-[34px] text-xs">Line four of filler content.</p>
      <p class="mb-[34px] text-xs">Line five of filler content.</p>
      <p class="mb-[34px] text-xs">Line six of filler content.</p>
      <p class="mb-[34px] text-xs">Line seven of filler content.</p>
    </div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">position: fixed; top: 10px; right: 10px &mdash; pinned to the viewport, ignores scrolling</p>
</div>

react

export function PositionFixed({
  top = 10,
  right = 10,
  label = "★ pinned",
  background = "#E8A020",
}) {
  const lineStyle = { margin: "0 0 34px", fontSize: 12 };
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 300 }}
      role="img" aria-label="A mock browser viewport with scrollable content; the badge is fixed and stays pinned in the same corner while the content underneath scrolls">
      <div style={{ position: "relative", transform: "translateZ(0)", height: 150, overflow: "auto", background: "#FAF7F2", border: "1.5px solid #24143055", borderRadius: 8 }}>
        <div style={{ position: "fixed", top, right, background, padding: "6px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, boxShadow: "0 4px 10px rgba(36,20,48,.3)" }}>
          {label}
        </div>
        <div style={{ padding: 12 }}>
          <p style={lineStyle}>Scroll this area.</p>
          <p style={lineStyle}>The badge does not move with it.</p>
          <p style={lineStyle}>Line four of filler content.</p>
          <p style={lineStyle}>Line five of filler content.</p>
          <p style={lineStyle}>Line six of filler content.</p>
          <p style={lineStyle}>Line seven of filler content.</p>
        </div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>
        position: fixed; top: {top}px; right: {right}px &mdash; pinned to the viewport, ignores scrolling
      </p>
    </div>
  );
}