How to Stack Elements in CSS

If you want to create fantastic and unique visual experiences on the web, you will eventually need two elements to overlap or exist in the same place. You may even just need them to be positioned near or next to each other. Let's go over two different ways to accomplish this, one with the position property and one with CSS Grid.

Method 1: Using the Position Property

You may already know that position: absolute; will place something absolutely on the page wherever you want it to be. In this case, we’re absolutely positioning the child to the top-left of the page. No matter where the parent is, the child will be placed in that corner, absolutely.

.child {
  ...
  position: absolute;
  top: 0;
  left: 0;
}

See the Pen
CSS Stacking, Absolute 1 by Sarah Drasner (@sdras)
on CodePen.

But this is very brittle! What if you were to place something on the page and then something else comes along after it? Maybe you have an icon within a navigation that you always want in the top-left corner, but a third party comes in and puts in a banner ad. (I’m not advocating for banner ads, but they do exist.) This pushes the navigation down and now the icon is out of place.

Or, let’s say you want to make a self-contained component that you can use in multiple places. You need it to be reusable and work within its own context, no matter where you use it.

If we put position: relative; on the parent element, anything inside of it with position: absolute; will be placed absolutely, relative to that containing unit!

.child {
  /* ... */
  position: absolute;
  top: 0;
  left: 0;
}

.parent {
  position: relative;
}

See the Pen
CSS Stacking, Absolute 2 by Sarah Drasner (@sdras)
on CodePen.

Nice.

We can use this same premise if we wanted to stack two elements on top of each other. Here, we’ll have two child elements stacked on top of one another and set apart by 150 pixels. We'll see that they're now contained in that same parent and stay positioned inside it.

<div class="parent">
  <h2>Parent</h2>

  <div class="child child-1">
    <h2>Child 1</h2>
  </div>

  <div class="child child-2">
    <h2>Child 2</h2>
  </div>
</div>

.child {
  position: absolute;
  top: 0;
}

.child-1 {
  left: 0;
}

.child-2 {
  left: 150px;
}

.parent {
  position: relative;
}

See the Pen
CSS Stacking, Absolute 3 by Sarah Drasner (@sdras)
on CodePen.

This is a little old school, but I’ve been using it for years and I still reach for it. It works consistently across browsers and can help you achieve even the strangest and unique placements.

Method 2: Using CSS Grid

Another nice way of overlapping elements, stacking them, or modifying their placement is CSS Grid, depending on how far back you need to support (which you can check with caniuse).

We can place something where we need it in the container like this:

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}

.child {
  grid-area: 1 / 1 / 2 / 2;
}

See the Pen
CSS Stacking, Grid 1 by Sarah Drasner (@sdras)
on CodePen.

And if one element should stack on the other, we can put them in the exact same grid area. Let's also offset them slightly by using a margin.

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}

.child {
  grid-area: 1 / 1 / 2 / 2;
}

.child-2 {
  margin-left: 200px;
}

See the Pen
CSS Stacking, Grid 2 by Sarah Drasner (@sdras)
on CodePen.

If you find this technique difficult to visualize, I’ve created a CSS Grid Generator that hopefully helps see things more clearly.

---

There are so many places to use these techniques! You can stack, layer and offset elements. You can make navigations, footers. You can create just about any type of layout where you want to have more fine-grain control of how elements are placed on a page.

The post How to Stack Elements in CSS appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2ZTXJek
via IFTTT