iframe map overlaps options bar

Question

iframe map overlaps options bar

Navigation

#1 by (0 votes)

0

I created a class to be able to apply the CSS, I already changed the positioning from relative to absolute and however it continues as it is in the photo. I need the bar not to overlap the map and the map to take up the entire width of the page.

html css

asked by anonymous 18.11.2018 / 18:20

1 answer

KSoap - send object My script that searches for a string in another is taking too long

score 0 · Answer 1

Use the z-index property to change the stacking order of the elements. In the case of the map that is an iframe, if there is only one, you can use:

iframe{
   position: absolute;
   left: 0;
   top: 0;
   z-index: 1;
}

See if the 1 value is sufficient to override the forward slash (if not, increase). You must also set the top and left properties (I put 0 on both to be in the upper left corner).

In relation to iframe occupy the entire width of the page, change the value of the attribute width to 100% .

<iframe src="ORIGEM" width="100%" ...>

Example:

body{
   margin: 0;
}

header{
   height: 50px;
   background: red;
   position: relative;
}

iframe{
   position: absolute;
   left: 0;
   top: 0;
   z-index: 1;
}

<header>barra</header>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6272.568233324809!2d-47.88493191352716!3d-15.805026517819782!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x683f464424289e16!2sSede+da+Pol%C3%ADcia+Federal!5e0!3m2!1spt-BR!2sbr!4v1542564229938"width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>