Stack

Intro

Stack lets you stack elements on top of each other. It is useful for creating overlapping layers (very much like having layers in Photoshop or other design applications).

When combined with Positioning classes like Edge, Stack lets you create complex layouts with backgrounds, content, and foregrounds easily.

Basic

Stack uses CSS Grid that has one column and one row. Everything is placed in that column and row.

<div class="Stack">
  <div>One<div>
  <div>Two<div>
</div>

Order of Layers

You can have an unlimited number of layers in a Stack. The order of layers are determined by two factors:

1. Whether they have a Background or Foreground class
2. The order in which they are placed in the HTML

Backgrounds will always be placed at the bottom of the stack, while Foregrounds will always be placed at the top.

<div class="Stack">
  <div class="Background"> Background </div>
  <div class="Background"> Background 2 </div>
  <div> Content </div>
  <div> Content 2 </div>
  <div class="Foreground"> Foreground </div>
  <div class="Foreground"> Foreground 2 </div>
</div>

Backgrounds

Background layers let you add misellaneous design items beyond what a standard background property could achieve — so you can do more than just colours and gradients.

One example of what you can do is SVG Backgrounds. To make beautiful SVG backgrounds, you can use SVG patterns from Pattern Monster, Hero Patterns and many others.

You can go even more nuts with this, but we won’t do that here.

Foregrounds

Foreground layers let you place elements before the content. This is useful for placing elements like badges, labels, or other elements that should be on top of the content.

Here’s the CSS for Stack.

The astro-island and astro-slot selectors help to alleviate styling frustrations when using Astro.

.Stack {
  position: relative;
  display: grid;
  grid-template-columns: minmax(min(0, 100%), 1fr);
  padding: 0;

  &::before,
  &::after,
  > *,
  > *:where(astro-island, astro-slot) > * {
    position: relative;
    z-index: 1;
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
  }

  > .Background {
    overflow: hidden;
    position: absolute;
    inset: 0;
  }

  > .Foreground {
    position: relative;
    z-index: 10;
  }
}

Stack Children

Classes