Overlapping elements in CSS

Question

How can I make two elements overlap in CSS, e.g.

Content 1
Content 2

I would like the two con

Answer 1

Use CSS grid and set all the grid items to be in the same cell.

.layered {
  display: grid;
}

.layered > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

Adding the layered class to an element causes all it's children to be layered on top of each other.

if the layers are not the same size you can set the justify-items and align-items properties to set the horizontal and vertical alignment respectively.

---

Demo:

JsFiddle

.layered {
  display: grid;

  /* Set horizontal alignment of items in, case they have a different width. */
  /* justify-items: start | end | center | stretch (default); */
  justify-items: start;

  /* Set vertical alignment of items, in case they have a different height. */
  /* align-items: start | end | center | stretch (default); */
  align-items: start;
}

.layered > * {
  grid-column-start: 1;
  grid-row-start: 1;
}


/* for demonstration purposes only */
.layered > * {
  outline: 1px solid red;
  background-color: rgba(255, 255, 255, 0.4)
}

  
  

    2
  
  

    

      Third layer
    
    

      Third layer continued
    
    

      Third layer continued
    
    

      Third layer continued