I want to keep my html form over my responsive slideshow image regardless of the screen size/width

Question

When I resize my window, my form goes far from the slideshow image. I want it always stick to the bottom-right corner of the slideshow.

The code that I have tried won't let me position the form to the bottom-right corner of my slideshow, because when I do, my slideshow stop being responsive.

 *{ font-family: Segoe UI; font-weight:700; font-size:12px; color:#333; padding:0px; margin:0px; border:0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body{ width:100%; } .contact{ position:absolute; width:25%; max-width:700px; right:10px; top:100px; } .PIC{ max-width: 100%; height: auto; width:870px; margin-left: 2px } .three_col input, .one_col input, .three_col select, .one_col textarea, .one_col #file { position:relative; padding:5px 5px; margin:1% 2%; float:left; z-index:10; border:1px solid #ccc; } .one_col input, .one_col textarea, .one_col #file { width:96%; } .one_col #submit{ background: #e74c3c; color:white; cursor:pointer; } .one_col #submit:hover{ background: #333; color: #d6d6d6; } @media handheld, only screen and (max-width: 999px) { .contact{ width:30%; } .one_col #file{ width:96%; } .three_col input, .one_col input, .three_col select, .one_col textarea{ width:96%; margin:2% 2%; } } 

 <div class="contact"> <form method="post" enctype="multipart/form-data" action="#" id="image-form" > <p>??ASDJKL??</p> <div class="one_col ans"> <input type="text" name="ans" placeholder="ans" class="default" > <span class="error"></span> </div> <div class="one_col"> <input id="submit" type="submit" value="Go!" /> </div> <span class="clear"></span> </form> </div> 

Thank you in advance, have a nice day!

Answer 1

Firstly nest your form into a wrapping container for your slideshow and contact form. The wrapping container should define your overall width and have a position of relative. That way absolute children will look to the wrapper for where to align themselves.

In my example:

.slideshow {
   position: relative;
   /* some kind of pre-defined dimensions/styles if you want */
}

Then, align your children with absolute values. In my example, I positioned your .contact as absolute, bottom: 10px, right 10px;. Because the wrapping container is relatively positioned, the form knows to stay in that container and respect its boundaries.

In my example, the sheer size of the image (which is staticly positioned) defines the size of the wrapper automatically.

Run my snippet and have a look.

 * { font-family: Segoe UI; font-weight: 700; font-size: 12px; color: #333; padding: 0px; margin: 0px; border: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { width: 100%; } .slideshow { position: relative; } .contact { position: absolute; width: 25%; max-width: 700px; right: 10px; bottom: 10px; } .PIC { max-width: 100%; height: auto; width: 870px; margin-left: 2px } .three_col input, .one_col input, .three_col select, .one_col textarea, .one_col #file { position: relative; padding: 5px 5px; margin: 1% 2%; float: left; z-index: 10; border: 1px solid #ccc; } .one_col input, .one_col textarea, .one_col #file { width: 96%; } .one_col #submit { background: #e74c3c; color: white; cursor: pointer; } .one_col #submit:hover { background: #333; color: #d6d6d6; } .doge-quote1, .doge-quote2 { position: absolute; font-size: 30px; } .doge-quote1 { color: pink; top: 10px; left: 30px; } .doge-quote2 { color: purple; bottom: 70px; left: 70px; } @media handheld, only screen and (max-width: 999px) { .contact { width: 30%; } .one_col #file { width: 96%; } .three_col input, .one_col input, .three_col select, .one_col textarea { width: 96%; margin: 2% 2%; } } 

 <div class="slideshow"> <span class="doge-quote1">wow!</span> <span class="doge-quote2">much positions</span> <img class="PIC" src="https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg" /> <div class="contact"> <form method="post" enctype="multipart/form-data" action="#" id="image-form"> <p>??ASDJKL??</p> <div class="one_col ans"> <input type="text" name="ans" placeholder="ans" class="default"> <span class="error"></span> </div> <div class="one_col"> <input id="submit" type="submit" value="Go!" /> </div> <span class="clear"></span> </form> </div> </div> 

Answer 2

This can be easily done using modern CSS3 and HTML5 since you did not disclosed the code well we cant relly help but i pulled a code that works pretty well

 @charset "UTF-8"; :root{ --x:500/1920; --v:100%; } *{ font-family: Segoe UI; font-weight:700; font-size:12px; color:#333; padding:0px; margin:0px; border:0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body{ display: grid; align-content: center; padding: 1rem; min-width: 240px; background-color: rgba(51,66,80,1); } nav{ background-color: cadetblue; height: 35px; } header{ background-color: cadetblue; } main{ background-color: steelblue; padding: 1.2rem; } footer{ height: 50px; padding: 1rem; background-color: #4b7bec; } ul{ /* background-color: #888; */ display: grid; grid-template-columns: repeat(5, 1fr); padding: 1.2rem .5rem 0rem .5rem; } li{ list-style: none; text-align: center;} a{ color: white; text-decoration: none; } header{ display: grid; position: relative; } figure{ --i:calc(var(--x)*var(--v)); margin: 0; position: relative; margin: .3em; padding-top: var(--i); } img{ background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c2/Anime_Girl.svg"); background-repeat:no-repeat; background-size:cover; background-position: top; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #888; } form { display: grid; grid-template-rows: repeat(auto-fit, minmax(25px,1fr)); grid-row-gap: .5em; padding: .5em; background-color: rgba(0,0,0,.3); width: 100%; position: absolute; bottom: 0; right: 0; z-index: 100; } p{ color: white; } input{ padding: .3em; cursor:pointer; } #submit{ background: #e74c3c; color:white; } @media only screen and (min-width: 600px){ form{ width: 50%; } } @media only screen and (min-width: 1080px){ form{ width: 33%; } } 

 <!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="responsiveForm.css"> <title>Document</title> </head> <body> <nav> <ul class='menu'> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul> </nav> <header> <figure class="slider"> <img src="" alt=""> </figure> <form method="post" enctype="multipart/form-data" action="#" id="image-form" > <p>??ASDJKL??</p> <input type="text" name="ans" placeholder="ans" class="default" > <span class="error"></span> <input id="submit" type="submit" value="Go!" /> </form> </header> <main> <section> <article class=""> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </article> </section> <section> <article class=""> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </article> </section> </main> <footer> <p> @ Jean Belmont copyright 2018.</p> </footer> </body> </html> 

But I will suggest a different aproach, for smaller resolutions, if you always leave the form in that position, and always with 30%-35% width it will shrink way to much in mobile devices

In this pen you can see how I handled the smaller screen sizes.

GO TO CodePen