无论屏幕大小/宽度如何，我都希望将html表单保留在响应式幻灯片图像上

Question

当我调整窗口大小时，我的表单与幻灯片图像不符。 我希望它始终粘贴在幻灯片的右下角。

我尝试的代码不允许我将表单定位到幻灯片的右下角，因为当我这样做时，幻灯片将停止响应。

 *{ 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> 

在此先感谢您，祝您度过愉快的一天！

Answer 1

首先，将您的表格嵌套在包装容器中，以进行幻灯片显示和联系表格。 包装容器应确定您的整体宽度并具有相对位置。 这样，绝对的孩子会寻找包装器来对齐自己的位置。

在我的示例中：

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

然后，使您的孩子与绝对值对齐。 在我的示例中，我将您的.contact定位为绝对，底部：10px，右侧10px;。 因为包装容器是相对放置的 ，所以表单知道保留在该容器中并遵守其边界。

在我的示例中，图像的绝对大小（静态放置）自动定义包装器的大小。

运行我的代码片段，看看。

 * { 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

使用现代CSS3和HTML5可以轻松完成此操作，因为您没有很好地披露代码，我们不能依靠我们，但是我拉出了一个效果很好的代码

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

但是我会建议采用另一种方法，对于较小的分辨率，如果始终将表格保留在该位置，并且宽度始终为30％-35％，它将在移动设备中缩小到很多

在这支笔中，您可以看到我如何处理较小的屏幕尺寸。

转到CodePen