How to overlay one div over another div

Mastering overlay placement

Overlay in the center

To shift the overlay towards the center, fine-tune top and left elements:

/* Behold! The middle path to enlightenment lies in translation */
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


Filling the container completely

Here's how to stretch your overlay to cover the entire container:

/* When the overlay becomes one with the container */
.overlay {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 1;
}


Avoid overflowing scrollbars with:

html, body {
  overflow: hidden;
}


Dynamic positioning tricks

calc() can help when things get a little complex:

.overlay {
  position: absolute;
  top: calc(50% - 20px); /* Tweak as per your zen */
  left: calc(50% - 30px); /* Feel the balance */
}


The CSS Grid way

To align overlays without absolute positioning:

.container {
  display: grid;
  place-items: center;
}


For more control over columns:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.overlay {
  grid-column-start: 2;
  grid-column-end: 3;
}


CSS Grid ensures responsive behavior, preventing overlaps and scaling issues.

Advanced overlay techniques and fixes

Stacking overlays and z-index

When dealing with multiple overlays, remember the Ethereum Rule: Higher the gas (read: z-index), faster the transaction (read: overlay visibility).

.overlay-one {
  position: absolute;
  z-index: 2; /* This one has more gas */
}
.overlay-two {
  position: absolute;
  z-index: 1; /* Less gas, stays under */
}


Parent container dimensions

It’s vital to consider the parent container's sizing for accurate overlay placement:

.container {
  position: relative;
  width: 500px; /* Rigid and unchangeable (unlike code requirements) */
  height: 300px; /* As immutable as my desire to keep coding */
}


Responsive design

For a fluent overlay, use percentages or viewport units, and not fixed values:

.overlay {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80vw;
  height: 80vh;
}


Compatibility issues

If you still care about Internet Explorer (or you boss does), remember Grid CSS might not be supported.

.container {
  display: -ms-grid; /* When you can't let go of the past (IE10+) */
  display: grid;
}
