防止绝对按钮重叠输入

时间：2016-07-12 16:10:54

标签： html css stylesheet

表单本身会随着页面缩小而扩展。我有一个使用position的位置：absolute; bottom：0;将它保持在页面底部。当页面缩小时，按钮与输入重叠。 我创建了一个第3个div来按下按钮并使用margin-bottom：10px;所以2应该永远不要触摸div3和button_holder。但它仍然重叠。如何防止2个div相互重叠？即使按钮是绝对的，div3仍应通过在使用display：table;

时按下整个表单来扩展表单 

#service_wrap {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 400px;
    max-height: 400px;
    display: table;
    background-color: #000;
    background-image: url('../images/thumbsup.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
h1 {
    color: #FFF;
    width: 90%;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
    text-transform: uppercase;
    margin-top: 4%;
    margin-bottom: 3%;
    padding-left: 3%;
}
h2 {
    color: #FFF;
    font-size: 17px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    margin-top: 5%;
    margin-bottom: 5%;
}
h3 {
    color: #000;
    font-size: 15px;
    width: 100%;
    text-decoration: underline;
    text-align: center;
    margin: 0 auto;
    margin-top: 1%;
    margin-bottom: 1%;
}
h4 {
    color: #000;
    font-size: 15px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 3%;
}
h5 {
    color: #000;
    font-size: 12px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 8%;
}
h6 {
    color: #FFF;
    width: 100%;
    margin-top: 100px;
    font-weight: bold;
    font-size: 16px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    margin-top: 10%;
}
#thingstoknow {
    border: 2px solid red;
    border-radius: 3px;
    width: 30%;
    margin: 0 auto;
    text-transform: uppercase;
    font-size: 15px;
    text-align: center;
    line-height: 46px;
    height: 48px;
    display: table;
}
#thingstoknow a {
    color: #FFF;
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    padding-right: 20px;
}
@media screen and (max-width: 400px) {} #service_top {
    margin: 0 auto;
    width:60%;
    display:table;
    margin-bottom:8%;
}
#service_bottom {
    height: 49%;
    width: 100%;
    display: table;
    margin-bottom: 8%;
}
/*     estimate form     */
/*form styles*/

#AUTO {
    display: table;
    /*makes div fill content*/
    
    width: 100%;
    margin: 0 auto;
    position: relative;
    border: px solid green;
    /*visual aid to make sure div fills content*/
    
    margin-bottom: 30px;
}
#AUTO fieldset {
    text-align: center;
    min-height: 350px;
    position: relative;
    width: 95%;
    margin: 0 auto;
    background-color: #FFF;
    display: table;
    /*makes div fill content*/
}
#miles {
    display: none;
    /*spammer fills this out and it gets rejected my mail script*/
}
/*Hide all except first fieldset*/

#AUTO fieldset:not(:first-of-type) {
    display: none;
    /*remove to see all feildsets*/
}
#AUTO fieldset {
    display: none
}
#AUTO fieldset:first-child {
    display: block;
}
#AUTO .div1 {
    margin: 0 auto;
    width: 240px;
    height: 65px;
    left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    border: px solid blue;
    /*visual aid to make sure div fills content*/
}
#AUTO .div2 {
    margin: 0 auto;
    width: 100%;
    display: table;
}
#AUTO .div3 {
    margin: 0 auto;
    width: 100%;
    display: table;
    border: 1px solid red;
    margin-bottom: 10px;
}
#contact_name {
    text-align: left;
    margin: 10px;
    min-width: 170px;
    width: 25%;
    display: inline-block;
    vertical-align: middle;
    /*visual aid to make sure div fills content*/
}
#contact_phone {
    text-align: left;
    margin: 10px;
    min-width: 170px;
    width: 25%;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}
#contact_email {
    text-align: left;
    margin: 10px;
    min-width: 170px;
    width: 25%;
    display: inline-block;
    vertical-align: middle;
}
.button_holder {
    width: 98%;
    margin: 0 auto;
    display: table;
    margin-top: 30px;
    margin-bottom: 10px;
    position: absolute;
    bottom: 0px;
}
input,
select,
textarea {
    -ms-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}
#contact_slide1 {
    display: table;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-top: 30px;
}
#contact_slide2 {
    display: table;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-top: 30px;
}
#contact_contact {
    min-width: 170px;
    width: 30%;
    display: table;
    float: right;
    white-space: nowrap;
}
#contact_message {
    width: 70%;
    display: table;
    margin: 0 auto;
    margin-bottom: 20px;
}
#contact_slide3 {
    display: table;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-top: 30px;
}
input {
    border: 2px solid black;
    border-radius: 4px;
    width: 95%;
    text-align: center;
    line-height: 46px;
    height: 30px;
}
textarea {
    margin: 0 auto;
    text-align: center;
    clear: both;
    border: 2px solid black;
    border-radius: 1px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: 100px;
    margin: 0 auto;
    text-align: center;
}
select {
    text-transform: uppercase;
    float: left;
    border: 2px solid black;
    border-radius: 1px;
    width: 100%;
    text-align: center;
    line-height: 35px;
    height: 35px;
}
input[type=submit] {
    border: 2px solid #F00;
    border-radius: 5px;
    width: 30%;
    text-align: center;
    float: right;
    line-height: 46px;
    height: 50px;
    background-color: #F00;
    color: #FFF;
    margin-left: 5px;
    margin-right: 5px;
}
input[type=button] {
    text-transform: uppercase;
    border: 2px solid #000;
    border-radius: 5px;
    width: 30%;
    text-align: center;
    float: right;
    line-height: 46px;
    height: 50px;
    background-color: #000;
    color: #FFF;
    margin-left: 5px;
    margin-right: 5px;
}
/*     ADDITIONAL SERVICES     */

#additional_services {
    width: 100%;
    margin: 0 auto;
    height: 350px;
    font-size: 14px;
    display: table;
    background-color: #CCC;
}
/*     map and locations     */

#loc_holder {
    background-color: #f0f0f0;
    width: 100%;
    height: 350px;
    display: table;
    padding-bottom: 20px;
    padding-top: 20px;
}
#loc_buttons {
    width: 100%;
    height: 100px;
    background-color: #0F0;
    display: none;
}
#loc_info {
    border: px solid red;
    background-color: #FFF;
    width: 47%;
    height: 420px;
    float: left;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    margin-left: 2%;
    margin-right: 1%;
}
#loc_map {
    background-color: #FFF;
    width: 47%;
    float: left;
    margin-left: 1%;
    margin-right: 2%;
    height: 400px;
    display: table;
}
#mloc {
    width: 96.9%;
    border: px solid blue;
    float: left;
    margin: 0 auto;
    padding-left: 3%;
    padding-bottom: 2%;
    margin-bottom: 2%;
    border-bottom: 2px solid #CCC;
}
#mloc_left {
    width: 55%;
    height: 115px;
    display: table;
    border: px solid green;
    float: left;
    padding-left: 3%;
}
#loc_info_dir {
    padding: 2%;
    width: 30%;
    height: 110px;
    display: table;
    float: left;
}
#loc_info_dir #loc_info_maplink {
    width: 80%;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 10%;
    text-align: center;
    font-size: 13px;
}
#loc_info_dir #loc_info_maplink a {
    text-decoration: none;
}
#loc_info_dir #loc_info_dist {
    border: 1px solid purple;
    width: 80%;
    margin: 0 auto;
    margin-top: 10%;
    margin-bottom: 3%;
    text-align: center;
    display: none;
    /* delete when sql code is done*/
}
.maptitle {
    width: 99%;
    border: px solid red;
    font-weight: bold;
    text-transform: uppercase;
}
.manager {
    width: 99%;
    border: px solid red;
    margin-bottom: 3px;
    margin-top: 3px;
}
.manager span {
    font-weight: bold;
}
.addy1 {
    text-transform: uppercase;
    width: 99%;
    border: px solid red;
    margin-bottom: 3px;
}
.addy2 {
    text-transform: uppercase;
    width: 99%;
    border: px solid red;
}
.phone1 {
    width: 99%;
    border: px solid red;
    font-size: 12px;
    font-weight: 600;
}
.fax1 {
    width: 99%;
    border: px solid red;
    font-size: 12px;
    font-weight: 600;
}
<form id="AUTO"   method="post" action="">
   <!-- fieldsets -->
   <fieldset>
      <div class="div3">
         <div class="div1"><img src="images/step1.png" width="233" height="65"></div>
         <h3>CONTACT INFO</h3>
         <input type="hidden" name="token" value="<?php echo $token; ?>"/>
         <input type="hidden" name="miles" value=""/>
         <div id="contact_name">FULL NAME: *<br>
            <input id="element_2_1" name="name" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME">
         </div>
         <div id="contact_phone">PHONE NUMBER: *<br>
            <input id="element_1" name="phone" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/>
         </div>
         <div id="contact_email">EMAIL:<br>
            <input id="element_1" name="email" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/>
         </div>
      </div>
      <!--div3-->
      <div class="button_holder">
         <input type="button" name="next" class="next action-button" value="Next"/>
      </div>
   </fieldset>
   <fieldset>
      <div class="div3">
         <div class="div1"><img src="images/step2.png" width="233" height="65"></div>
         <h3>VEHICLE INFO</h3>
         <div id="contact_name">VEHICLE MAKE: *<br>
            <input id="element_2_1" name="make" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME">
         </div>
         <div id="contact_phone">VEHICLE MODEL: *<br>
            <input id="element_1" name="model" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/>
         </div>
         <div id="contact_email">YEAR*:<br>
            <input id="element_1" name="year" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/>
         </div>
         <div id="contact_name">VIN NUMBER: <br>
            <input id="element_2_1" name="vin" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME">
         </div>
         <div id="contact_phone">INSURANCE COMPANY ( if applicable ):<br>
            <input id="element_1" name="insurance_company" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/>
         </div>
      </div>
      <!--div3-->
      <div class="button_holder">
         <input type="button" name="next" class="next action-button" value="Next"/>
         <input type="button" name="previous" class="previous action-button" value="Previous"/>
      </div>
   </fieldset>
   <fieldset>
      <div class="div3">
         <div class="div1"><img src="images/step3.png" width="233" height="65"></div>
         <div id="contact_message">MESSAGE:<br>
            <textarea id="element_3" name="message" class="element textarea medium" placeholder="START TYPING MESAGE HERE..."></textarea>
         </div>
      </div>
      <!--div3-->
      <div class="button_holder">
         <input type="button" name="next" class="next action-button" value="ALMOST DONE"/>
         <input type="button" name="previous" class="previous action-button" value="Previous" />
      </div>
   </fieldset>
   <fieldset>
      <div class="div3">
         <div class="div1"><img src="images/step4.png" width="233" height="65"></div>
         <h4>THANK YOU!</h4>
         <h5>Once you hit Submit a representative will be with you shortly. </h5>
      </div>
      <!--div3-->
      <div class="button_holder">
         <input type="submit" name="submit" class="submit action-button" value="SUBMIT" />
         <input type="button" name="previous" class="previous action-button" value="Previous"  />
      </div>
   </fieldset>
</form>

2 个答案:

答案 0 :(得分：0)

试试此代码

＆＃13;
＆＃13; 
#service_wrap{
padding:0;
margin:0;
width:100%;
height:400px;
max-height:400px;
display:table;
background-color:#000;
background-image: url('../images/thumbsup.jpg') ;
background-size: cover;
background-repeat: no-repeat;
}	
h1{
color:#FFF;
width:90%;
text-align:center;
font-weight:bold;
font-size:22px;
text-transform:uppercase;
margin-top:4%;
margin-bottom:3%;
padding-left:3%;
}
h2{color:#FFF;
font-size:17px;
width:100%;
text-align:center;
margin: 0 auto;
margin-top:5%;
margin-bottom:5%;
}
h3{
color:#000;
font-size:15px;
width:100%;
text-decoration:underline;
text-align:center;
margin: 0 auto;
margin-top:1%;
margin-bottom:1%;
}
h4{
color:#000;
font-size:15px;
width:100%;
text-align:center;
margin: 0 auto;
margin-top:3%;
margin-bottom:3%;
}
h5{
color:#000;
font-size:12px;
width:100%;
text-align:center;
margin: 0 auto;
margin-top:3%;
margin-bottom:8%;
}
h6{
color:#FFF;
width:100%;
margin-top:100px;
font-weight:bold;
font-size:16px;
margin: 0 auto;
text-align:center;
text-transform:uppercase;
margin-top:10%;
}
#thingstoknow{
border: 2px solid red;
border-radius: 3px;
width:30%;
margin: 0 auto;
text-transform:uppercase;
font-size:15px;
text-align:center;
line-height:46px;
height:48px;
display:table;
}	

#thingstoknow a{color:#FFF;width:100%;height:100%;display:block;text-decoration:none;
white-space:nowrap;
text-align:center;
padding-right:20px;}
@media screen and (max-width: 400px) {}
#service_top{
margin: 0 auto;
width:60%;
display:table;
margin-bottom:8%;
}
#service_bottom{
height:49%;
width:100%;
display:table;
margin-bottom:8%;
}
/*     estimate form     */


/*form styles*/
#AUTO {
display:table;/*makes div fill content*/
width: 100%;
margin:0 auto;
position: relative;
border:px solid green; /*visual aid to make sure div fills content*/
margin-bottom:30px;
}
#AUTO fieldset {
text-align:center;
min-height:350px;
position:relative;
width:95%;
margin:0 auto;
background-color:#FFF;
display:table;/*makes div fill content*/
}
#miles{
display:none;/*spammer fills this out and it gets rejected my mail script*/
}
/*Hide all except first fieldset*/
#AUTO fieldset:not(:first-of-type) {
display: none;/*remove to see all feildsets*/
}
#AUTO fieldset {
display:none
}
#AUTO fieldset:first-child {
display: block;
}
#AUTO .div1{
margin:0 auto;
width: 240px;
height:65px;
left:10px;
margin-top:10px;
margin-bottom:20px;
border:px solid blue; /*visual aid to make sure div fills content*/
}
#AUTO .div2{
margin:0 auto;
width: 100%;
display:table;
}
#AUTO .div3{
margin:0 auto;
width: 100%;
display:table;
border: 1px solid red;
margin-bottom:10px;
}

#contact_name{
text-align:left;
margin:10px;
min-width:170px;
width:25%;
display:inline-block;
vertical-align: middle; /*visual aid to make sure div fills content*/
}
#contact_phone{text-align:left;margin:10px;min-width:170px;width:25%;display:inline-block; vertical-align: middle;white-space:nowrap;
}
#contact_email{text-align:left;margin:10px;min-width:170px;width:25%;display:inline-block; vertical-align: middle;
}
.button_holder {
width: 98%;
margin:0 auto;
display:table;
margin-top:30px;
margin-bottom:10px;
position: relative;
bottom:0px;
}







input, select, textarea{

    
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-box-sizing:content-box; 
}
#contact_slide1{display:table;width:70%;margin: 0 auto;
margin-bottom:30px;
margin-top:30px;}
#contact_slide2{display:table;width:70%;margin: 0 auto;margin-bottom:30px;
margin-top:30px;}

#contact_contact{min-width:170px;width:30%;display:table;float:right;
white-space:nowrap;}



#contact_message{width:70%;display:table;margin: 0 auto;margin-bottom:20px;}

#contact_slide3{display:table;width:70%;margin: 0 auto;margin-bottom:30px;
margin-top:30px;}

input {


border: 2px solid black;
border-radius: 4px;
width:95%;
text-align:center;
line-height:46px;
height:30px;
}
textarea {margin: 0 auto;
text-align:center;
clear:both;
border: 2px solid black;
border-radius: 1px;
width:100%;margin: 0 auto;
text-align:center;
display: block;

margin-left: auto;
margin-right: auto;
text-align:center;
height:100px;margin: 0 auto;
text-align:center;
}
select {  text-transform:uppercase;

	float:left;
border: 2px solid black;
border-radius: 1px;
width:100%;
text-align:center;
line-height:35px;
height:35px;
}
input[type=submit] { 
border: 2px solid #F00;
border-radius: 5px;
width:30%;
text-align:center;
float:right;
line-height:46px;
height:50px;
background-color:#F00;
color:#FFF;
margin-left:5px;margin-right:5px;
}
input[type=button] {
text-transform:uppercase;
border: 2px solid #000;
border-radius: 5px;
width:30%;
text-align:center;
float:right;
line-height:46px;
height:50px;
background-color:#000;
color:#FFF;
margin-left:5px;margin-right:5px;
}
/*     ADDITIONAL SERVICES     */
#additional_services{
width:100%;
margin: 0 auto;
height:350px;
font-size:14px;
display:table;
background-color:#CCC;
}
/*     map and locations     */
#loc_holder{
background-color:#f0f0f0;
width:100%;
height:350px;
display:table;
padding-bottom:20px;
padding-top:20px;
}
#loc_buttons{
width:100%;
height:100px;
background-color:#0F0;
display:none;
}
#loc_info{border:px solid red;
background-color:#FFF;
width:47%;
height:420px;
float:left;
overflow:scroll;
-webkit-overflow-scrolling: touch;
margin-left:2%;
margin-right:1%;
}
#loc_map{
background-color:#FFF;
width:47%;float:left;
margin-left:1%;
margin-right:2%;
height:400px;
display:table;
}
#mloc{
width:96.9%;
border:px solid blue;
float:left;
margin: 0 auto;
padding-left:3%;
padding-bottom:2%;
margin-bottom:2%;
border-bottom: 2px solid #CCC;
}
#mloc_left{
width:55%;
height:115px;
display:table;
border:px solid green;
float:left;
padding-left:3%;
}
#loc_info_dir{
padding:2%;
width:30%;
height:110px;
display:table;
float:left;
}
#loc_info_dir #loc_info_maplink{width:80%;margin:0 auto;
margin-top:3%;
margin-bottom:10%;
text-align:center;
font-size:13px;}
#loc_info_dir #loc_info_maplink a{
text-decoration:none;
}
#loc_info_dir #loc_info_dist{border:1px solid purple;width:80%;margin:0 auto;
margin-top:10%;
margin-bottom:3%;
text-align:center;
display:none;/* delete when sql code is done*/
}
.maptitle{	width:99%;
border:px solid red;
font-weight:bold;
text-transform:uppercase;}
.manager{width:99%;
border:px solid red;
margin-bottom:3px;margin-top:3px;}
.manager span{
font-weight:bold;
}
.addy1{text-transform:uppercase;width:99%;
border:px solid red;margin-bottom:3px;}
.addy2{text-transform:uppercase;width:99%;
border:px solid red;}
.phone1{width:99%;
border:px solid red;
font-size:12px;font-weight:600;}
.fax1{width:99%;
border:px solid red;font-size:12px;font-weight:600;}
＆＃13; 
<form id="AUTO"   method="post" action="">

<!-- fieldsets -->
<fieldset>
<div class="div3">

<div class="div1"><img src="images/step1.png" width="233" height="65"></div>

<h3>CONTACT INFO</h3>
<input type="hidden" name="token" value="<?php echo $token; ?>"/>
<input type="hidden" name="miles" value=""/>
<div id="contact_name">FULL NAME: *<br>
<input id="element_2_1" name="name" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div> 	
	

<div id="contact_phone">PHONE NUMBER: *<br>
<input id="element_1" name="phone" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/></div> 

<div id="contact_email">EMAIL:<br>
<input id="element_1" name="email" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/>
</div> 






</div><!--div3-->
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="Next"/>
</div>



</fieldset>





<fieldset>
<div class="div3">
<div class="div1"><img src="images/step2.png" width="233" height="65"></div>


<h3>VEHICLE INFO</h3>

<div id="contact_name">VEHICLE MAKE: *<br>
<input id="element_2_1" name="make" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div> 	
	

<div id="contact_phone">VEHICLE MODEL: *<br>
<input id="element_1" name="model" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/></div> 

<div id="contact_email">YEAR*:<br>
<input id="element_1" name="year" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/>
</div> 


<div id="contact_name">VIN NUMBER: <br>
<input id="element_2_1" name="vin" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div> 	
	

<div id="contact_phone">INSURANCE COMPANY ( if applicable ):<br>
<input id="element_1" name="insurance_company" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/></div> 





</div><!--div3-->
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="Next"/>
<input type="button" name="previous" class="previous action-button" value="Previous"/>
</div>


</fieldset> 

<fieldset>
<div class="div3">
<div class="div1"><img src="images/step3.png" width="233" height="65"></div>



<div id="contact_message">MESSAGE:<br>
<textarea id="element_3" name="message" class="element textarea medium" placeholder="START TYPING MESAGE HERE..."></textarea></div> 




</div><!--div3-->
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="ALMOST DONE"/>
<input type="button" name="previous" class="previous action-button" value="Previous" />
</div>
</fieldset> 

<fieldset>
<div class="div3">
<div class="div1"><img src="images/step4.png" width="233" height="65"></div>

<h4>THANK YOU!</h4>
<h5>Once you hit Submit a representative will be with you shortly. </h5>
</div><!--div3-->
<div class="button_holder">
<input type="submit" name="submit" class="submit action-button" value="SUBMIT" />
<input type="button" name="previous" class="previous action-button" value="Previous"  />

</div>

</fieldset> 



</form>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你好不确定为什么你总是想要屏幕底部的按钮，如果它是一个块元素，它总是在表格的末尾，但如果 你想在移动设备上停止重叠，只需设置媒体查询断点并将其位置更改为＆＃34; static＆＃34;：

＆＃13;
＆＃13; 
@media screen and (max-width: 800px) {
  .button_holder {
    position: static;
  } 
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题