У меня есть карта, и над ней я хочу иметь контейнер, который в будущем будет модальным, чтобы содержать форму. Проблема в том, что это отображается ниже, и я хочу, чтобы оно отображалось выше, я проводил тесты с и position
z-index
т. Д., Но ничего не появляется. Как это делается?
Моя голова говорит мне, что у меня должен быть общий контейнер (Gyms-Container) и что это родительский контейнер и что внутри него есть карта и модал с относительным положением, а также играть сz-index
#Gimnasios-Contenedor {
padding: 20px 0;
position: absolute;
}
#map {
height: 400px;
width: 100%;
margin: auto;
margin-top: 20px;
z-index: 50;
}
#ModalContacto {
height: 300px;
width: 60%;
background-color: orangered;
margin: auto;
position: relative;
top: 20%;
z-index: 100;
}
<div id="Gimnasios-Contenedor">
<div id="map"></div>
<div id="ModalContacto"></div>
</div>
Если вы хотите иметь
div#ModalContacto
вышеперечисленноеdiv#map
, вы должны поместить его в абсолютное положение и переместить его с координатами в положение, которое вы хотите иметь, следует уточнить, чтоdiv
родитель должен быть в относительном положении.Вы должны назначить родителя или предка a
position: relative
так, чтобы он стал референтом модального окна , к которому добавляется aposition: absolute;
, чтобы поместить его в координаты, относящиеся к родительскому контейнеру или aposition: fixed
, если вы хотите, чтобы он был расположен относительно всего размер окна и карты , я рекомендую вам поставитьposition: relative;
так, чтобы z-index работал так, как вы хотите, так как z-index работает только с элементами, которым назначено свойство position , отличное от значения по умолчанию, которое естьstatic
.В качестве заключительной рекомендации рекомендую не использовать такие высокие значения z-index , как правило, в большинстве разработок или страниц работает назначение от 1 до 20. А в постоянных плавающих элементах, таких как плавающие меню или лайтбокс-типа modals заключается в том, что используются высокие значения, такие как 100 или 1000.
Надеюсь, я разъяснил, если у вас есть другие вопросы, напишите мне комментарий. успехи.
Gimnasios-Contenedor
Вы можете поставить (родительский) div, а можете поставить ( дочерний)position: relative;
div так, чтобы он был вверху и с таким z-индексом уже было бы слишком много (поэтому я его убрал).ModalContacto
position:absolute