<div class="page-wrap">

    <div class="sticky"></div>
body {
  // ok with sticky
  overflow-x: hidden;

.page-wrap {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 100px 1fr auto;
  gap: 1rem;

  // Make sure there is room enough to actually be sticky.
  height: 10000px;
  > * {
    border: 1px solid #ccc;
    border-radius: 8px;
    background: white;

  // Whaaaat
  // transform: scale(0.5);
  // transform-origin: top center;

  // Scrollby
  // transform: rotate(40deg);

  // Breaks Sticky
  // overflow: hidden;
  // overflow-x: hidden;
  // overflow-y: hidden;

body {
  margin: 0;
  padding: 1rem;
  background: #eee;

footer {
  grid-column: 1 / -1;
  height: 100px;
footer {
  height: 1000px;

aside {
  padding: 1rem;

  // If you're going to do bottom sticky
  // display: grid;
  // align-items: end;

  // This would break sticky, as it's not stretching anymore.
  // align-self: start;

  // Breaks sticky at this level, too.
  // overflow: hidden;

// Careful you are applying it to an element that supports it. For example, Chrome doesn't support <thead> or <tr> at the moment (but it's a bug).
.sticky {
  height: 200px;
  background: black;
  border-radius: 5px;

  // transform: rotate(-40deg);

  // Careful the browser supports this. It's fairly safe these days, but no IE.
  // Also, old-Safari needs a -webkit- vendor prefix;
  position: sticky;

  // Careful to use positioning! Without this (or another direction), sticky does nothing.
  top: 1rem;

.not-sticky {
  height: 100px;
  background: orange;
  border-radius: 5px;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.