Overlapping elements in CSS

Question

How can I make two elements overlap in CSS  e g    lt div gt Content 1 lt  div gt   lt div gt Content 2 lt  div gt    I would like the two contents  they can be anything  to overlap  so Content 2 is displayed starting at the same top left corner as Content 1 and they appear overlapped  Content 1 should begin in the normal flow of the document and not at some fixed position on the screen   Is this possible   Thanks   AJ

User · Answer

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

_x000D_

.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)
}

_x000D_

<div class="layered">
  <img src="https://via.placeholder.com/250x100?text=first" />
  <p>
    2
  </p>
  <div>
    <p>
      Third layer
    </p>
    <p>
      Third layer continued
    </p>
    <p>
      Third layer continued
    </p>
    <p>
      Third layer continued
    </p>
  </div>
</div>

_x000D_

User · Answer

You can use relative positioning to overlap your elements  However  the space they would normally occupy will still be reserved for the element    lt div style  background-color  f00 width 200px height 100px   gt      DEFAULT POSITIONED  lt  div gt   lt div style  background-color  0f0 width 200px height 100px position relative top -50px left 50px   gt      RELATIVE POSITIONED  lt  div gt   lt div style  background-color  00f width 200px height 100px   gt      DEFAULT POSITIONED  lt  div gt    In the example above  there will be a block of white space between the two  DEFAULT POSITIONED  elements  This is caused  because the  RELATIVE POSITIONED  element still has it s space reserved   If you use absolute positioning  your elements will not have any space reserved  so your element will actually overlap  without breaking your document    lt div style  background-color  f00 width 200px height 100px   gt      DEFAULT POSITIONED  lt  div gt   lt div style  background-color  0f0 width 200px height 100px position absolute top 50px left 50px   gt      ABSOLUTE POSITIONED  lt  div gt   lt div style  background-color  00f width 200px height 100px   gt      DEFAULT POSITIONED  lt  div gt    Finally  you can control which elements are on top of the others by using z-index    lt div style  z-index 10 background-color  f00 width 200px height 100px   gt      DEFAULT POSITIONED  lt  div gt   lt div style  z-index 5 background-color  0f0 width 200px height 100px position absolute top 50px left 50px   gt      ABSOLUTE POSITIONED  lt  div gt   lt div style  z-index 0 background-color  00f width 200px height 100px   gt      DEFAULT POSITIONED  lt  div gt

User · Answer

I think you could get away with using relative positioning and then set the top left positioning of the second DIV until you have it in the position desired

User · Answer

the easiest way is to use position absolute on both elements  You can absolutely position relative to the page  or you can absolutely position relative to a container div by setting the container div to position relative   lt div id  container  style  position relative   gt       lt div id  div1  style  position absolute  top 0  left 0   gt  lt  div gt       lt div id  div2  style  position absolute  top 0  left 0   gt  lt  div gt   lt  div gt

User · Answer

You can try using the transform  translate property by passing the appropriate values inside the parenthesis using the inspect element in Google chrome   You have to set translate property in such way that both the  lt div gt  overlap each other then You can use JavaScript to show and hide both the  lt div gt  according to your requirements

[css] Overlapping elements in CSS

Demo:

Examples related to css