0

I am working on a project which displays a map and if you select the country displays information about the given country.

The map has to be the whole size of the page.

And the modal should be hidden until the user selected the country.

I want to display the modal on the left side of the map and display:block if the country selected.

I try position absolute for the modal but it still follows the normal content flow and displays it below the map.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#mapid {
  width: 100%;
  height: 97%;
}

#modal {
  position: absolute;
  width: 45%;
  background-color: red;
}
<div class="search-item row" id="selectDiv">
  <select class="col-12" id="select" name="country"></select>
</div>


<div class="box map" id="mapid"></div>

<div id="modal">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed fugit velit voluptatibus, quae, nulla saepe fugiat in quo, debitis ipsa ullam corporis deserunt. Fugit repudiandae accusantium illum tempora quia.</p>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Bence Horvath
  • 1
  • I made you a snippet. Please make it a [mcve] – mplungjan Aug 23 '21 at 18:58
  • 1
    Because you haven't told the element **where to be**. So it defaults to where it would be until you apply some top/bottom/right/left values – Paulie_D Aug 23 '21 at 19:07
  • 1
    absolute witout coordonates will set the element where it should have been in the flow without disturbing the flow. – G-Cyrillus Aug 23 '21 at 19:07
  • [Reference](https://developer.mozilla.org/pt-BR/docs/Web/CSS/position#absolute) to the behaviour described by the other comments. – Gunther Aug 23 '21 at 19:10

0 Answers0