Div's overlapping

Question

I have a list of div pairs: MainDiv's and infPanel Divs. I need to put infPanel div's upon MainDiv and eliminate distance between MainDiv's. The best decision that I see is to set image in MainDiv with background option and just put infPanel inside MainDiv, but because of some technical requirements it is better to post image through just tag.

Another solution is to use position: absolute; and with JS set the position for each infPanel, but it will be great to eliminate JS.

Can you suggest more "agile" solution? Thank you.

Answer 1

You may use margin with negative values.

For example,

element{margin-top:-100px;}

will "move" the element 100 pixels to the top, overlapping other element.

Note that margin-top with negative values works also well with position:absolute; if you need to specify a z-index to reorder elements. It means that instead of specifying the top and left for each element, you will "move" the element to the top, according to its actual position (whereas top and left fix the position according to the page).

Answer 2

If you just want the InfPanel at the bottom of MainDiv, you don't need JS at all, you can do it with CSS:

.MainPanel {
  position: relative;
}

.InfPanel {
  position: absolute;
  bottom: 0;
}