---
title: "Wes Bos on X: \"Are you using position: absolute; to overlap el..."
description: "!https://x.com/wesbos/status/1834242925401694490"
date: 2024-09-13
published: true
tags:
  - css
  - dev
  - thought
  - webdev
template: link
---


<div class="embed-card embed-card-external">
  <a href="https://x.com/wesbos/status/1834242925401694490" class="embed-card-link" target="_blank" rel="noopener noreferrer">
    <div class="embed-card-image">
      <img src="https://pbs.twimg.com/ext_tw_video_thumb/1834242444856012800/pu/img/gMe2zqE_D9gfXBUd.jpg" alt="Wes Bos (@wesbos) on X — Are you using position: absolute; to overlap elements?

It&#39;s almost always better to Use CSS Grid instead!" loading="lazy">
    </div>
    <div class="embed-card-content">
      <div class="embed-card-title">Wes Bos (@wesbos) on X</div>
      <div class="embed-card-description">Are you using position: absolute; to overlap elements?

It&#39;s almost always better to Use CSS Grid instead!</div>
      <div class="embed-card-meta">X (formerly Twitter) &middot; x.com</div>
    </div>
  </a>
</div>


This is a pretty incredible use of css grid to overlay items overtop of each other without needing to resort to `position: absolute` and the side effects that it brings.


``` css
.wrap {
  display: grid;
  & > * {
    grid-row: 1;
    grid-column: 1;
  }
}
```