Html 为什么一个部门要转移到另一个部门？

正如您在下面看到的，一个

div

正在向另一个移动。如何修复它并将页脚保持在页面底部？这个表是由PHP创建的，但我认为这不会影响它。我试着在不同的位置“打球”，但没有给我正确的结果

.body{
边际：0px；
背景图像：url（../images/background.png）
}
.tbl1{
字体系列：投石机MS；
字体大小：12px；
颜色：#000；
背景色：#FFF；
填充：4x；
边缘底部：5px；
背景色：透明；
}
.tbl2{
字体系列：投石机MS；
字体大小：14px；
背景色：#FFF；
填充：4x；
边缘底部：5px；
背景色：透明；
}
.col-1-2{
宽度：25%；
边框：1px实心；
边界半径：10px；
保证金：2倍；
背景色：#007dc1；
左侧填充：6px；
字体系列：投石机MS；
边框：3px实心#005684；
}
.col-1-2-2{
宽度：66%；
边界半径：10px；
背景色：#007dc1；
字体系列：投石机MS；
左侧填充：12px；
垫底：10px；
边框：3px实心#005684；
}
.我的按钮{
-moz盒阴影：插入0px 1px 0px 0px#54a3f7；
-webkit盒阴影：插图0px 1px 0px 0px#54a3f7；
盒影：插图0px 1px 0px 0px#54a3f7；
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#007dc1）、颜色停止（1，#0061a7））；
背景：-莫兹线性梯度（顶部，#007dc1 5%，#0061a7 100%）；
背景：-webkit线性梯度（顶部，#007dc1 5%，#0061a7 100%）；
背景：-o-线性梯度（顶部，#007dc1 5%，#0061a7 100%）；
背景：-ms线性梯度（顶部，#007dc1 5%，#0061a7 100%）；
背景：线性梯度（至底部，#007dc1 5%，#0061a7 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#007dc1'，endColorstr='#0061a7'，GradientType=0）；
背景色：#007dc1；
-moz边界半径：6px；
-webkit边界半径：6px；
边界半径：6px；
边框：1px实心#124d77；
显示：内联块；
光标：指针；
颜色：#ffffff；
字体系列：投石机MS；
字号：21px；
字体大小：粗体；
填充：14px 44px；
文字装饰：无；
文本阴影：0px 0px 0px#154682；
}
.myButton:悬停{
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#0061a7）、颜色停止（1，#007dc1））；
背景：-莫兹线性梯度（顶部，#0061a7 5%，#007dc1 100%）；
背景：-webkit线性梯度（顶部，#0061a7 5%，#007dc1 100%）；
背景：-o-线性梯度（顶部，#0061a7 5%，#007dc1 100%）；
背景：-ms线性梯度（顶部，#0061a7 5%，#007dc1 100%）；
背景：线性梯度（至底部，#0061a7 5%，#007dc1 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#0061a7'，endColorstr='#007dc1'，GradientType=0）；
背景色：#0061a7；
}
.myButton:活动{
位置：相对位置；
顶部：1px；
}
*,
*：之后，
*：之前{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
[类别*=“列-”]{
浮动：左；
右边填充：20px；
/*列空间*/
}
.电网{
宽度：100%；
最大宽度：1140px；
最小宽度：755px；
保证金：0自动；
溢出：隐藏；
}
.网格：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.网格垫{
填充顶部：20px；
左侧填充：20px；
/*左边的网格空间*/
右边填充：0px；
/*右侧网格空间：（左侧网格空间-列空间）例如20px-20px=0*/
}
.向右推{
浮动：对；
}
/*内容栏*/
.col-1-1{
宽度：100%；
}
.col-2-3，
col-8-12{
宽度：66.66%；
}
塔帕斯先生{
宽度：1%；
}
.页脚{
位置：绝对位置；
底部：0；
高度：40px；
宽度：900px；
文本对齐：居中；
背景色：#007dc1；
边界半径：10px；
边缘顶部：10px；
字体系列：投石机MS；
}
.span{
文本对齐：居中；
}
.tr3{
背景色：#343838；
字体系列：投石机MS；
字体大小：12px；
文本对齐：居中；
颜色：#008C9E；
字体大小：粗体；
}
.tr4{
背景色：#343838；
字体系列：投石机MS；
字体大小：13px；
文本对齐：居中；
颜色：黑色；
}
雷克拉玛先生{
高度：90px；
宽度：210px；
边框：1.5px#000实心；
边界半径：10px；
垂直对齐：中间对齐；
}
雷克拉玛先生1{
垂直对齐：中心对齐；
边缘顶部：10px；
左边距：7px；
}
利尼娅先生{
背景色：黑色；
颜色：黑色；
高度：2倍；
边框：0px无；
明确：两者皆有；
边界半径：5px；
左边距：10px；
}
.tr5{
背景色：#343838；
字体系列：投石机MS；
字体大小：13px；
文本对齐：居中；
颜色：绿色；
}
.tr6{
背景色：#343838；
字体系列：投石机MS；
字体大小：13px；
文本对齐：居中；
颜色：红色；
}
.tr7{
背景色：#343838；
字体系列：投石机MS；
字体大小：13px；
文本对齐：居中；
颜色：#009；
}
.tr8{
背景色：#343838；
字体系列：投石机MS；
字体大小：13px；
文本对齐：居中；
颜色：#FF6；
}

蜂房




帕斯库蒂内斯项目
Visos teises saugomos@2014

由于您的页脚是绝对定位的，它将定位在底部，并在内容上重叠。。。试试这个，会有用的

.col-1-2-2{
边缘底部：50px；
}

您使用的是页脚的绝对位置，因此当容器页面高度小于内容页面高度时，页脚与其他div重叠。不建议将绝对和相对位置与同一级别的div混合使用。尝试使用浮点位置进行除法除法。

使页脚类如下所示：

.footer {
position:relative;
float:left;
height : 40px;
width: 900px;
text-align: center;
background-color: #007dc1;
border-radius: 10px;
margin-top: 10px;
font-family: Trebuchet MS;
}

结果是：

这没有帮助。结果是：