All geek questions in one place

Javascript div overlay

I would like to overlay div (1) on the background image on top of another div (2) containing JavaScript (in this case, Google maps API v3). Is it possible?

I tried to mess up the z-index with no luck, and I can't use absolute positioning, as I rely on div (1) to position other divs.

A quick example can be found here - itgeekgroup.com

Trying to get an itgeek speech bubble for overlaying a google map.

Cheers, Giles.

+4
source share
2 answers

First, a code example would be a good idea, because there are many details that we need to know. (e.g. what other divs rely on div (1) position?)

You cannot overlay divs in box-model or inline (model).

You can try using negative margin to move div (1) through div (2), but this is not an elegant solution.

You should reconsider the use of absolute positioning, as this is clearly the preferred solution.

+1
source

I would suggest placing div (1) with the background image below the translucent Google maps container, because then you can still access the Google Maps controls. This can be accomplished using the CSS opacity and z-index properties in both containers.

Here is a JS script with a live demo using the Google Maps API: jsfiddle.net/Xk87Y/

0
source

Source: https://habr.com/ru/post/1435777/

More articles:


All Articles