Html 启用页脚显示在z索引控制的div下面

正如在我的示例中所看到的，我启用了两个div，它们的内部HTML由JS填充，它们基于全宽样式或媒体查询样式显示在彼此的上方，但我无法将我的两个页脚设置为显示在彼此上方的div的下方

为了使它们彼此重叠，我对两个div使用position:absolute和z索引值

在调整浏览器大小时，如何使页脚显示在div下方

非常感谢您的帮助

编辑：我已经更新了我的代码和fidle。。。在CSS中我删除了位置：绝对；从#divcalendartabletwo，这使两个页脚都显示在日历下面，但当我在iphone上以纵向模式加载页面时，这会稍微打乱我的媒体查询。。基本上，我的元素没有占据手机屏幕的全部宽度

HTML:

---

您必须从

#divcalendartabletwo

和页脚中删除

位置：绝对

，这将解决您的问题

检查

var日历=函数（o）{
this.divId=o.ParentID；
this.DaysOfWeek=o.DaysOfWeek；
myLogger（“this.DaysOfWeek==”+this.DaysOfWeek）
这个月=0个月；
myLogger（“this.Months==”+this.Months）
var d=新日期（）；
myLogger（“d==”+d）
this.CurrentMonth=d.getMonth（）；
myLogger（“this.CurrentMonth==”+this.CurrentMonth）；
this.CurrentYear=d.getFullYear（）；
myLogger（“this.CurrentYear==”+this.CurrentYear）；
var f=o.格式；
myLogger（“o==”+o）；
myLogger（“f==”+f）；
if（typeof（f）=‘string’）{
this.f=f.charAt（0）.toUpperCase（）；
}否则{
这个.f='M'；
}
log（“this.f==”，this.f）；
};
Calendar.prototype.nextMonth=函数（）{
log（“Calendar.prototype.nextMonth=function（）{”）；
如果（this.CurrentMonth==11）{
console.log（“this.currentmount==”+this.currentmount）；
此.CurrentMonth=0；
console.log（“this.currentmount==”+this.currentmount）；
console.log（“this.CurrentYear==”+this.CurrentYear）；
this.CurrentYear=this.CurrentYear+1；
console.log（“this.CurrentYear==”+this.CurrentYear）；
}否则{
console.log（“this.currentmount==”+this.currentmount）；
this.CurrentMonth=this.CurrentMonth+1；
console.log（“this.currentmount+1==”+this.currentmount）；
}
这是showCurrent（）；
};
Calendar.prototype.previousMonth=函数（）{
log（“Calendar.prototype.previousMonth=function（）{”）；
如果（this.CurrentMonth==0）{
console.log（“this.currentmount==”+this.currentmount）；
本.CurrentMonth=11；
console.log（“this.currentmount==”+this.currentmount）；
console.log（“this.CurrentYear==”+this.CurrentYear）；
this.CurrentYear=this.CurrentYear-1；
console.log（“this.CurrentYear==”+this.CurrentYear）；
}否则{
console.log（“this.currentmount==”+this.currentmount）；
this.CurrentMonth=this.CurrentMonth-1；
log（“this.currentmount-1==”+this.currentmount）；
}
这是showCurrent（）；
};
Calendar.prototype.previousYear=函数（）{
控制台日志（“”）；
log（“Calendar.prototype.previousYear=function（）{”）；
console.log（“this.CurrentYear==”+this.CurrentYear）；
this.CurrentYear=this.CurrentYear-1；
console.log（“this.CurrentYear-1，即this.CurrentYear==”+this.CurrentYear）；
这是showCurrent（）；
}
Calendar.prototype.nextYear=函数（）{
控制台日志（“”）；
log（“Calendar.prototype.nextYear=function（）{”）；
console.log（“this.CurrentYear==”+this.CurrentYear）；
this.CurrentYear=this.CurrentYear+1；
console.log（“this.CurrentYear-1，即this.CurrentYear==”+this.CurrentYear）；
这是showCurrent（）；
}             
Calendar.prototype.showCurrent=函数（）{
控制台日志（“”）；
log（“Calendar.prototype.showCurrent=function（）{”）；
console.log（“this.CurrentYear==”+this.CurrentYear）；
console.log（“this.currentmount==”+this.currentmount）；
本.日历（本.当前年，本.当前月）；
};
Calendar.prototype.Calendar=函数（y，m）{
控制台日志（“”）；
log（“Calendar.prototype.Calendar=function（y，m）{”）；
typeof（y）=“数字”？本年=y:null；
console.log（“this.CurrentYear==”+this.CurrentYear）；
typeof（y）=“number”？this.CurrentMonth=m:null；
console.log（“this.currentmount==”+this.currentmount）；
var firstDayOfCurrentMonth=新日期（y，m，1）.getDay（）；
log（“firstdayofcurrentmount==”，firstdayofcurrentmount）；
var lastDateOfCurrentMonth=新日期（y，m+1，0）.getDate（）；
log（“lastDateOfCurrentMonth==”，lastDateOfCurrentMonth）；
log（“m==”，m）；
var lastDateOfLastMonth=m==0？新日期（y-1，11，0）.getDate（）：新日期（y，m，0）.getDate（）；
log（“lastDateOfLastMonth==”，lastDateOfLastMonth）；
日志（“打印所选的月份和年份”）；
var monthandyearhtml=''+此.Months[m]+'-'+y+''；
log（“monthandyearhtml==”+monthandyearhtml）；
var html=''；
var htmltwo=''；
html+=''；
htmltwo+=''；
控制台日志（“”）；
log（“写入一周中几天的标题”）；
对于（变量i=0；i<7；i++）{
log（“i==”，i）；
log（“this.DaysOfWeek[i]=”，this.DaysOfWeek[i]）；
html+=''+this.DaysOfWeek
    <!-- JS targets this div -->
    <div class="overalldivcalendartable">

       <!-- <div id="year"></div> -->

      <div class="controlsdivcalendartable">
           <span id="btnPrevYr" title="Previous Year"><span><<</span></span>

           <span id="btnPrev" title="Previous Month"><span><</span></span>

           <!-- <input type="button" src="images/btnprevmonth.png" alt="Submit" id="btnPrev"/>-->

           <!-- <div id="month"></div> -->

             <!-- JS targets this div -->
             <div id="monthandyear"></div>

           <!--<input type="button" src="images/btnnextmonth.png" alt="Submit" id="btnNext"/>-->

           <span id="btnNext" title="Next Month"><span>></span></span>

           <span id="btnNextYr" title="Next Year"><span>>></span></span>      
        </div>

      <div class="clear"></div>

      <div id="divcalendartable"></div>

    <div id="divcalendartabletwo"></div>         

    </div>
</div>

<div class="clear"></div>

<footer id="footer">
    <section>
        <h3>ABOUT US:</h3>

        <p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. <br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. <br></p>             
    </section>

    <section>
        <h3>LIKE, FOLLOW OR WATCH US:</h3>
        <ul class="social">
            <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/facebook.png"/></a></li>               
            <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png"/></a></li>
            <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/youtube.png"/></a></li>                    
        </ul>
    </section>

    <section id="contactus">
        <h3>CONTACT US:</h3>

        <p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..<br><br><b>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</b><br><br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..<br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</p>             
    </section>
</footer>

<footer class="footerTwo">
    <p> Copyright &copy; 2015 | qwerty Ltd | All rights reserved.</p>
</footer>

footer {
    background-color: #808080;
    width: 100%;
    overflow: hidden;
}

footer p, footer h3 {
    color: #FFFFFF;
}

footer p a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal;
    font-size: 14px;
}

ul.social li {
    display: inline;
}

ul.social img {
    height: 50px;
}

footer.footerTwo {
    border-top: 1px solid #4D4350;
    background-color: #3366FF;
    text-align: center;
}

/* Generic table styling */
.overalldivcalendartable {
    margin: 12px 0 12px 10px;
    float: left;
}

.controlsdivcalendartable {
    background: #FFCC00;
    float: left;
}

table { 
  border-collapse: collapse; 
}

th { 
  background: #333; 
  color: white; 
  font-size: 20px;
  font-weight: bold; 
  padding: 6px;
  vertical-align: top;
}

td { 
  padding: 6px; 
  border: 1px solid #ccc;
  vertical-align: top;
  width: 125px;
  height: 100px;
  font-size: 20px;
}

/* Disable div to be used for media query calendar */
#divcalendartable {
    visibility: visible;
    z-index: 2;
    position: absolute;
}

#divcalendartabletwo {
    visibility: hidden;
    z-index: 1;
}

#divcalendartable, #divcalendartabletwo {
    margin-top: 10px;
}

#btnPrevYr, #btnPrev, #monthandyear, #btnNext, #btnNextYr {
    font-size: 35px;
    font-weight: bold;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
    /*background: #00FFCC;*/      
}

#monthandyearspan {
  font-size: 35px;
  font-weight: bold;
  margin-left: 20px;
  margin-right: 20px;
  vertical-align: middle;
  /*background: #00FFCC;*/
}   

#monthandyear {
  vertical-align: middle;
  float: left;
}

.daysheader {
  background: #C0C0C0;
  height: auto;
  text-align: center;
}

#prevmonthdates, #nextmonthdates {
  font-size: 20px;
  font-weight: bold;
  background-color: #E0E0E0;
  width: 130px;
  height: 100px;
}

#prevmonthdates, #nextmonthdates {
  background-color: #E0E0E0;
}

#currentmonthdates {
  background-color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
  width: 130px;
  height: 100px;
}

/*Apply styling UL cellvaluelist*/
#cellvaluelist {
  font-family:'Trebuchet MS', Tahoma, Sans-serif;
  font-size: 20px;  
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/*Apply styling on all LI items in the UL cellvaluelist*/
#cellvaluelist > li {
  list-style-type: none;
  text-align: left;
  border-bottom: 2px solid #F5F5F5;
}

/*Eliminate border on last list item*/
#cellvaluelist > li:last-child {
  border: none;
}

/*Styling for the span in the main list*/
#cellvaluelist > li span {
  text-decoration: none;
  color: #000;
  display: block;
  width: 150px;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

/*Shared styling for swim and chrono*/
.swim, .chrono {
    font-size: 15px;
    font-weight: normal; 
}

/*Styling for the list items in the table cells*/
.swim {
  background: #626FD1;
}

/*Hover on the 1st LI item on the list in the table cell*/
.swim:hover {
  background: #F5F5F5;
  cursor: pointer;
}

/*Styling for the list items in the table cells*/
.chrono {
    background: #EDCF47;
}

/*Hover on the 2nd LI item on the list in the table cell*/
.chrono:hover {
  background: #F5F5F5;
  cursor: pointer;
}

/*Styling for the list items in the table cells*/
.couponcode {
    background: #47ED4D;
    font-size: 15px;
    font-weight: normal;
}

/*Hover on the last LI item on the list in the table cell*/
.couponcode:hover {
  background: #F5F5F5;
  cursor: pointer;
}

/*Apply the hover on the UL coupontooltipullist*/
.couponcode:hover .coupontooltipullist {
    display: block;
}

/*UL in the tooltip*/
.coupontooltipullist {
    display: none;
    position: absolute;
    z-index: 1000;
    padding: 5px;
}

/*Shared UL and LI list properties in the tooltip*/
.coupontooltipullist, .coupontooltip_li_list {
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    cursor: pointer;    
}

/*LI in the tooltip*/
.coupontooltip_li_list {
    background: #D6D6D6;
    border-bottom: 2px solid #F5F5F5;
    padding: 10px;
 }

/*IMG in the LI in the tooltip*/
.coupontooltipimg {
    width: 55px;
    height: 48px;
    float: left;
    padding-right: 5px;    
}

/*Span in the LI in the tooltip*/
.coupontooltiplistspan {
  float: right;
}

/*Responsive Styles - div_lhs_menu and table */
@media screen and (max-width : 768px), screen and (min-width: 768px) and (max-width: 1024px)  {

    .div_lhs_menu {
        margin-left: 0;
        width: 100%;
    }

    .overalldivcalendartable {
       clear: both;
       margin-top: 10px;
       margin-left: 0px;
    }

    #divcalendartable {
        visibility: hidden;
    }

    #divcalendartabletwo {
        visibility: visible;
    }

    #btnPrevYr, #btnPrev, #monthandyear, #btnNext, #btnNextYr {
        margin-left: 7px;
        margin-right: 7px;
        font-size: 20px;
    }

    #monthandyearspan {
      margin-left: 7px;
      margin-right: 7px;
      font-size: 20px;
    }

    #prevmonthdates, #currentmonthdates, #nextmonthdates {
      width: 50px;
      height: 50px;
      font-size: 20px;
    }      
}

@media screen and (max-width : 1024px) {
    .overalldivcalendartable {
        width: 100%;
    }
}

@media screen and (max-width : 1185px) {
    .overalldivcalendartable {
        width: 75%;
    }
}