1

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

введите сюда описание изображения

Сам код:

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>
      

2
  • 2
    Маааленький совет: если у вас в макете нечто шириной 140px и с бордером в 1px, не нужно задавать ширину 138px, достаточно дописать box-sizing:border-box; и тогда объект будет занимать те же 140px, и с бордером, и с паддингом.
    – DaemonHK
    13 мар 2019 в 12:34
  • Понял. Спасибо.
    – lausa
    15 мар 2019 в 13:42

1 ответ 1

4

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

#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

3
  • то же самое получается
    – lausa
    13 мар 2019 в 12:33
  • @lausa не поленился, сделал за Вас 13 мар 2019 в 13:09
  • Понял. Спасибо!!!
    – lausa
    15 мар 2019 в 13:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.