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

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

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

Use CSS grid and set all the grid items to be in the same cell   layered     display  grid      layered  gt        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   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  gt        grid-column-start  1    grid-row-start  1         for demonstration purposes only     layered  gt        outline  1px solid red    background-color  rgba 255  255  255  0 4    x000D   lt div class  layered  gt     lt img src  https   via placeholder com 250x100 text first    gt     lt p gt      2    lt  p gt     lt div gt       lt p gt        Third layer      lt  p gt       lt p gt        Third layer continued      lt  p gt       lt p gt        Third layer continued      lt  p gt       lt p gt        Third layer continued      lt  p gt     lt  div gt   lt  div gt  x000D   x000D   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

[css] Overlapping elements in CSS

Examples related to css