how to overlay html blocks

Question

I make up this template, and it’s impossible to overlay blocks as in the photo:

The code itself:

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>

A little piece of advice: if you have something in the layout that is 140px wide and with a border of 1px, you do not need to set the width to 138px, just add box-sizing:border-box;
and then the object will occupy the same 140px, and with the border, and with the padding.

Accepted Answer · 2019-03-13T12:21:29

So, for example:

 #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>

both blocks are with position: absolute and they have different left and top

how to overlay html blocks

1 answer 1

More articles: