Sticky stack textbox

by Grzegorz Matyszewski

HTML

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde consequatur consectetur modi exercitationem animi eligendi sunt veniam vitae, facilis a fugit inventore voluptatem aspernatur necessitatibus sint ea ducimus porro. Accusantium?</p>
<div class="wrapper">
  <div class="child"><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non eligendi laborum recusandae optio deleniti quod perferendis reiciendis vero quam, ratione cum exercitationem repellendus quasi! Voluptates, blanditiis quas. Illum, vero nihil!</p></div>
  <div class="child"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam perspiciatis porro eligendi vitae, eaque facilis obcaecati magnam dolor illum dignissimos quos ex voluptatem sed accusantium laboriosam fugit nulla repudiandae aliquam!</p></div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam adipisci provident totam explicabo officia cupiditate consequuntur quisquam quas, officiis tenetur id, doloribus libero tempora facilis numquam amet deserunt harum ut!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat blanditiis tempore incidunt laudantium, voluptatem corporis commodi autem, maxime quia, id cum facilis consectetur enim eos deserunt adipisci corrupti eius rerum!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime unde quis accusantium quod eveniet labore, nam veniam tempore voluptatem nulla eaque debitis nobis, totam facilis veritatis ut earum ullam iure.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi similique aut maxime distinctio aspernatur. Laboriosam ab distinctio necessitatibus modi voluptatibus ea magnam suscipit recusandae, ipsum atque hic, quos, odit voluptates!</p>

CSS

body { background: #f6f8c7; }
p { max-width: 300px; font-size: 24px; padding-inline: 20px; }
.child { border: 1px solid black; background: white; max-width: 340px; margin-block: 20px; }
.child:not(:last-child) { position: sticky; top: 0; z-index: -1; }
.child:first-child { background: black; color: white; }
.child:last-child { translate: 20px 0; }