I made a form that appears by clicking from different buttons, but this is not a problem if, for example, we clicked on a button at the very bottom of the page, then the form pops up at the very top ...

How can you make without a duplication of the form itself ascent where clicked?

$(".button").on("click", function() { $(".form").show(); }) 
 * { margin: 0; padding: 0; } html, body { width: 80%; margin: auto; } .form { width: 375px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fbfbfb; padding: 10px; box-shadow: 0 0 120px #000; display: none; } input[type="text"] { display: block; } 
 <div class="form"> Форма обращения <form action=""> <p>Ваше Имя <input type="text"></p> <p>Ваше Фамилия <input type="text"></p> <p> М<input type="radio" name="a"> Ж <input type="radio" name="a"> </p> <p> Ваше сообщение <textarea name="" id="" cols="50" rows="10"></textarea> </p> <input type="submit" value="Отправить"> </form> </div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, cum iure esse quae iusto provident suscipit sequi similique dolore debitis deserunt illo delectus rerum rem fugit earum. Libero, tempore saepe. </p> <img src="http://placehold.it/400x200" alt=""> <button class="button">Открыть форму</button> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sunt autem perferendis excepturi repellendus aliquid vero maxime magni odit facere iusto molestias, cupiditate magnam iure quo blanditiis vel. Sapiente, nostrum. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, cum iure esse quae iusto provident suscipit sequi similique dolore debitis deserunt illo delectus rerum rem fugit earum. Libero, tempore saepe. </p> <img src="http://placehold.it/400x200" alt=""> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, cum iure esse quae iusto provident suscipit sequi similique dolore debitis deserunt illo delectus rerum rem fugit earum. Libero, tempore saepe. </p> <img src="http://placehold.it/400x200" alt=""> <button class="button">Открыть форму</button> <img src="http://placehold.it/400x200" alt=""> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, cum iure esse quae iusto provident suscipit sequi similique dolore debitis deserunt illo delectus rerum rem fugit earum. Libero, tempore saepe. </p> <img src="http://placehold.it/400x200" alt=""> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, cum iure esse quae iusto provident suscipit sequi similique dolore debitis deserunt illo delectus rerum rem fugit earum. Libero, tempore saepe. </p> <button class="button">Открыть форму</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

In other words, what would she have always been in sight

    2 answers 2

    Changed nothing, just changed position: absolute; on position: fixed;
    If the form is going to be long, inside it you can additionally add a scroll, via overflow: scroll , by limiting the height, for example, through height: 100vh (vh percentage depends on the height of the current window)

     $(".button").on("click", function() { $(".form").show(); }) 
     * { margin: 0; padding: 0; } html, body { width: 80%; margin: auto; } .form { width: 375px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fbfbfb; padding: 10px; box-shadow: 0 0 120px #000; display: none; } input[type="text"] { display: block; } 
     <div class="form"> Форма обращения <form action=""> <p>Ваше Имя <input type="text"></p> <p>Ваше Фамилия <input type="text"></p> <p> М<input type="radio" name="a"> Ж <input type="radio" name="a"> </p> <p> Ваше сообщение <textarea name="" id="" cols="50" rows="10"></textarea> </p> <input type="submit" value="Отправить"> </form> </div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, cum iure esse quae iusto provident suscipit sequi similique dolore debitis deserunt illo delectus rerum rem fugit earum. Libero, tempore saepe. </p> <img src="http://placehold.it/400x200" alt=""> <button class="button">Открыть форму</button> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sunt autem perferendis excepturi repellendus aliquid vero maxime magni odit facere iusto molestias, cupiditate magnam iure quo blanditiis vel. Sapiente, nostrum. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, cum iure esse quae iusto provident suscipit sequi similique dolore debitis deserunt illo delectus rerum rem fugit earum. Libero, tempore saepe. </p> <img src="http://placehold.it/400x200" alt=""> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, cum iure esse quae iusto provident suscipit sequi similique dolore debitis deserunt illo delectus rerum rem fugit earum. Libero, tempore saepe. </p> <img src="http://placehold.it/400x200" alt=""> <button class="button">Открыть форму</button> <img src="http://placehold.it/400x200" alt=""> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, cum iure esse quae iusto provident suscipit sequi similique dolore debitis deserunt illo delectus rerum rem fugit earum. Libero, tempore saepe. </p> <img src="http://placehold.it/400x200" alt=""> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, cum iure esse quae iusto provident suscipit sequi similique dolore debitis deserunt illo delectus rerum rem fugit earum. Libero, tempore saepe. </p> <button class="button">Открыть форму</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    • thanks ... I need to sleep more often ... - MaximLensky

    I use this alignment:

     .center { position: absolute; top: 0; transform: translate(50vw, 50vh) translate(-50%, -50%) rotate(45deg); } 
     <div>1</div><div>2</div><div>3</div><div>2</div><div>3</div> <img class="center" src="https://i.stack.imgur.com/EK1my.png?s=128">