как сделать наложение блоков html

106

27 ноября 2019, 05:00

Верстаю данный шаблон, и не получается сделать наложение блоков как на фото:

Сам код:

body { 
    background-color: #101114; 
} 
     
.datainfo { 
    width: 350px; 
    height: 236px; 
    border: 1px solid #e4e9ee; 
    left: -240px; top: 50px; 
    z-index: 1; 
} 
     
.cvc { 
    width: 370px; 
    height: 236px; 
    border: 1px solid #e4e9ee; 
    background-color: #f7f8f8; 
    margin-top: -57%; 
    margin-left: 55%; 
} 
     
.line { 
    width: 269px; 
    height: 42px; 
    background-color: #e4e9ee; 
    margin-left: 27.5%; 
    margin-top: 26px; 
} 
     
.cvc_code { 
    width: 138px; 
    height: 42px; 
    border: 1px solid #e4e9ee; 
    background-color: #ffffff; 
    margin-left: 57%; 
    margin-top: 100px; 
} 
     
.form { 
    position: fixed; 
    top: 30%; 
    left: 30%; 
    width: 639px; 
    height: 569px; 
    background-color: #f7f8f8; 
} 
     
.info, .numberpay, .sumpay { 
    color: #535864; 
    font-family: "Arial MT"; 
    font-size: 16px; 
    font-weight: 400; 
} 
     
.card_number { 
    color: #8494ab; 
    font-family: "Arial MT"; 
    font-size: 16px; 
    font-weight: 400; 
} 
     
input { 
    width: 65px; 
    height: 42px; 
    border: 1px solid #e4e9ee; 
} 
     
#validate { 
    width: 70px; 
    height: 42px; 
    border: 1px solid #e4e9ee; 
} 
     
.validity { 
    display: table-caption; 
} 
     
#holder { 
    width: 319px; 
    height: 42px; 
    border: 1px solid #e4e9ee; 
} 
     
.btn_pay { 
    width: 133px; 
    height: 40px; 
    border-radius: 20px; 
    border: 0; 
    background-color: #005abf; 
    color: #fff; 
    background-image: linear-gradient 
        (to top, rgba(37, 36, 35, 0.18) 0%, rgba(37, 36, 35, 0) 100%); 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <link rel="stylesheet" href="css/main.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <title>Document</title> 
</head> 
<body> 
<form action="" class="form"> 
    <div class="form_pay"> 
        <div class="infopay"> 
            <p class="info">Информация по оплате:</p> 
            <p class="numberpay">Номер счета: 87123658716587</p> 
            <p class="sumpay">Сумма платежа: 100 руб.</p> 
        </div> 
        <h3>Данные банковской карты</h3> 
        <div class="datainfo"> 
            <div class="cart"> 
                <p class="card_number">Номер карты</p> 
                <input type="text"> 
                <input type="text"> 
                <input type="text"> 
                <input type="text"> 
 
                <div class="validity">Срок действия 
                    <div class="validity_input"> 
                        <input id="datapicker" type="text"> 
                        <input id="datepicker" type="text"> 
                    </div> 
                    <input id="holder" type="text" placeholder="Держатель карты"> 
                </div> 
                <div class="cvc"> 
                    <div class="line"></div> 
                    <input class="cvc_code" type="text"> 
                </div> 
            </div> 
        </div> 
    </div> 
    <button class="btn_pay" type="submit">Оплатить</button> 
</form> 
 
<script src="/js/main.js"></script> 
</body> 
</html>

Answer 1

Вот так, например:

#cards { 
  position: relative;  
} 
 
#card1, #card2 {  
  padding: 10px; 
  position: absolute;  
  border: 1px solid gray; 
  background-color: white; 
  border-radius:6px; 
  width: 250px; 
  height: 130px; 
} 
 
#card1 { 
  z-index: 10;  
} 
 
#card2 { 
  top: 50px; 
  left: 150px;  
} 
 
.digits { 
  width: 50px; 
} 
 
.owner { 
  margin-top: 5px; 
} 
 
#card2 div.text { 
  position:absolute; 
  right: 20px; 
  top: 70px; 
} 
 
#card2 input { 
  position:absolute; 
  right: 20px; 
  top: 100px; 
}

<div class="infopay"> 
    <p class="info">Информация по оплате:</p> 
    <p class="numberpay">Номер счета: 87123658716587</p> 
    <p class="sumpay">Сумма платежа: 100 руб.</p> 
</div> 
<h3>Данные банковской карты</h3> 
<div id="cards"> 
    <div id='card1'> 
      <div>Номер карты</div> 
      <input class='digits'> 
      <input class='digits'> 
      <input class='digits'> 
      <input class='digits'> 
      <div>Срок действия</div> 
      <input class='digits'> 
      <input class='digits'> 
      <input class='owner' placeholder="Держатель карты"> 
    </div> 
    <div id='card2'> 
      <div class='text'>CVC</div> 
      <input class='digits'> 
    </div> 
</div>

оба блока с position: absolute и у них разный left и top

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Удалить скрипт со страниц, определить Regex

Мне нужно скрипт хакерский удалить с нескольких сотен страниц моего сайтаВот он скрипт:

102

jQuery

Ошибка Found non-callable @@iterator

Вызываю обычную функцию

176

jQuery

Как исходя из URL выполнить скрипт?

Вопрос, на странице есть переключатель табов Можно ли составить ссылку таким образом что бы исходя из ссылки при переходе нужный таб был...

102

jQuery

Фиксированный заголовок таблицы Footable (плагин Jquery)

форумчане, пользуюсь для своего сайта таблицей footableСтолкнулся с такой проблемой что не могу реализовать фиксированный заголовок при вертикальной...

120