Question

您好我在html和css中使用jquery制作幻灯片。我发现我需要将幻灯片放映的图像定位到绝对位置并保持div相对。但问题是，一旦我将图像位置设置为绝对其他对象（如页脚div），并且所有对象都隐藏在图像下方。换句话说，定位为绝对的图像不再保留在div内。我怎么能解决这个问题请帮忙。当然，我的所有对象都是可扩展的，所以我无法确定任何固定大小。谢谢。

这是我的代码：

<tr>
  <td>
    <div class="slideshow"> <img src="images/Banners/bg_top_img2.jpg" class="slide"> <img src="images/Banners/bg_top_img3.jpg" class="slide"> <img src="images/Banners/bg_top_img4.jpg" class="slide"> </div>
  </td>
</tr>
<tr>
  <td>
    <div> THis is the footer </div </td>
</tr>

这是我的CSS代码：

.slideshow{
position: relative:
width:100%;
background-color:#FF0;
float: left;    
}
.slide{
width:100%;
position: absolute;
display: block;

}
.slideshow > div{
position: absolute;
padding:2px;
width:100%;
height: auto;
bottom:2px;
}

Answer 1

你的页脚隐藏在img后面的问题是“位置：绝对”.. 你可以通过给你的页脚“top：200px”这样的东西来解决这个问题（我们无法看到你的imgs有多大）。

编辑：尝试使用百分比值，例如= top：10％

或尝试媒体查询，如

@media only Screen and (max-width: xxxpx){
  .cssclass{
    top:100px;
 }
}

绝对图像涵盖其他div

1 个答案: