Не знаю как сверстать форму и расположить ее над картой, прошу помогите, заранее благодарен
2 ответа
Ваша проблема: проблема как я понимаю у вас в правильном расположении элементов. Из-за чего один другого перекрывает, тут решение довольно простое, дать z-index
, то есть порядок отображения элементов. У карты и формы должен быть общий контейнер, это нужно для того чтобы форма всегда располагалась по центру карты, с учетом того, что карта растянута на всю ширину контейнера:
.container {
width: 600px;
height: 400px;
background-color: #eee;
position: relative;
}
.map {
width: 100%;
height: 100%;
background-image: url(https://images.indianexpress.com/2017/05/google-maps-759.jpg);
z-index: 0;
}
.form {
width: 250px;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 100%;
box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.form input {
margin-bottom: 10px;
}
.form textarea {
margin-bottom: 10px;
}
<div class="container">
<div class="map"></div>
<form action="#" method="POST" class="form">
<input type="text" placeholder="Name" name="name">
<input type="text" placeholder="Email" name="email">
<textarea placeholder="Message"></textarea>
<button type="#">Кнопка</button>
</form>
</div>
-
спасибо большое вы меня выручили, будь таким милосердным подскажи как делать карты на google maps ? Commented 3 авг. 2018 в 7:15
-
Если ответ вам помог, отметьте его как правильный, чтобы он помог другим =)– DenisoedCommented 3 авг. 2018 в 7:19
-
-
на счет того как добавить карту почитайте к примеру вот nubex.ru/blog/seryozha_siroezhkin/google_map И ОБЯЗАТЕЛЬНО ЧИТАЙТЕ ОФЕЦИАЛЬНУЮ ДОКУМЕНТАЦИИ google map– DenisoedCommented 3 авг. 2018 в 7:26
-
Добавьте свою форму в div с картой, и пропишите стили для формы
`position: relative;
top: 100px;
left: 150px;
opacity: 0.7;
border-radius: 40px;`