map <iframe> overrides options bar

Asked

Viewed 90 times

0

inserir a descrição da imagem aqui

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

html css

  • edit your question and put the code of what you did, to help visualize the problem

1 answer

0

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

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

See if the value 1 is sufficient to override the bar (if not, increase). It is also necessary to define the properties top and left (placed 0 in both to stay in the upper left corner).

In relation to iframe occupy the whole page width, change the value of the attribute width for 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.