Как разместить карту div в поле формы?

Question

Так вот как выглядит страница, я бы хотел разместить карту ниже поля координат в форме? Я немного новичок в дизайне, так что вы, ребята, помогите мне достичь этого. Необработанный исходный код с веб-страницы был вставлен ниже в ссылку js fiddle .

<div>
    <p class="hilite">Example of code</p>
</div>
<div>
    <span class="hilite">More example of code</span>
</div>

.hilite {
    background-color: yellow;
}

Этот код выше - просто фиктивный код для публикации этого вопроса с минимальным воспроизводимым примером.

Answer 1

Добро пожаловать!

Чтобы сдвинуть карту ниже поля координат, удалите следующие css из #mapDiv

  position: absolute;
  z-index: 1;
  top: 30%;
  bottom: 10%;
  right: 5%;
  left: 60%;

и просто добавьте css

#mapDiv {
height: 300px;
width :300px;
}

Из-за position:absolute и других свойств, таких как top, left, он не работал.

Надеюсь, это может вам помочь.

Answer 2

Удалите абсолютное позиционирование с вашей карты и задайте ему высоту:

https://jsfiddle.net/Sixtus78/wvpc9mt3/3/

<style>
#mapDiv {
  z-index: 1;
  background-color: grey;
  box-shadow: 3px 3px 10px 1px;
  overflow: hidden;
  height: 300px;
}
</style>