How to put 2 modules on top of each other?

Question

i basically want a contact information form module on top of a google maps module so the google maps are a type of background and the form itself is around 30% of the container. This is perfectly illustrated in smartaddons sj zaga template, but i cant find anywhere here how it is done. I presume it has something to to with z-index in css for which one will be in front, and probably a setting of margin-left set to a minus value for the second module?

I also want to arrange in a similar manner a slideshow module underneath a reservation form..

Answer 1

The problem is that the two modules (the map and the contact form) both use a div with the same class:

<div class="ctajax-element">
    // Map displayed here
</div>
<div class="ctajax-element">
    // Contact form displayed here
</div>

This means that you can't target any of the <div> elements individually. You have to change these div's (or add an additional class) in order to be able to target each of them.

This should work:

<div class="ctajax-element mymap">
    // Map displayed here
</div>
<div class="ctajax-element myform">
    // Contact form displayed here
</div>

Then add the following CSS:

.ctajax-element.myform {
   position: absolute;
   width: 40%!important;
}

.ctajax-element.mymap {
   width: 100%!important;
}

The result should look something like this: