Html 绝对定位幻灯片放映问题

所以我尝试创建一个幻灯片，通过使用绝对定位将图片堆叠在彼此的顶部，但我遇到的问题是幻灯片下方的文本也堆叠在图片的顶部。我试着把图片放在一个包装器div中，它的位置是相对的，但那没有任何作用。如果有人知道有什么问题，我真的很感谢你的帮助

HTML代码

<div id="imageDiv">
    <div id="mainImage">
            <img class="imagePositioning" id="slideshowImg1"  src="images/tbrownMain.jpg" alt="Image of Terrell Brown" ></img>
            <img  class="imagePositioning" id="slideshowImg2" src="images/giantsMain.jpg" alt="Image of Giants" ></img>
            <img  class="imagePositioning" id="slideshowImg3"  src="images/kobeMain.jpg" alt="Image of Kobe" ></img>
            <img  class="imagePositioning" id="slideshowImg4"  src="images/nashMain.jpg" alt="Image of Nash" ></img>
            <img class="imagePositioning" id="slideshowImg5" src="images/tebowMain.jpg" alt="Image of Tim Tebow" ></img>
    </div>
    <div id="contentText">
            <a id="introText">Tim Tebow talks about Aaron Hernandez</a>
            <p id="detailsPar">Tim Tebow...</p>

    </div>
    <table id="mediaMenu">
    <tr>
        <td class="subMenu">
            <a href="#" onclick="doEverything(0)">
            <table> 
                <tr> <td class="subTitle"> Tebow Talks </td></tr>
                <tr><td><img style="opacity:1.0" id="sub0" src="images/tebow.jpg" alt="Tim Tebow"></img></td></tr> 
            </table>
            </a></td>
//...4 more nested tables in same way
</tr>
</table>
</div>  

#mainImage {
position:relative;
}
#imageDiv {
border: 5px solid black;
width:70%;
position:relative;
}
.imagePositioning  {
position:absolute;
}

#contentText {
color:orange;
float:right;
position:absolute;
left:43%;
width:26%;
top:2%;
}
#mediaMenu td {
margin:3px;
padding:0px;
width:20%;
color:blue;
font-family: Chalkduster, Verdana, Sans-serif;
text-transform:uppercase;
font-size:12px;
}   

---

尝试将文本中包含的任何div的z索引设置为较低。假设是contentText使用：

#contentText  {
    position:absolute;
    z-index:-1;
}

如果这不是您的确切解决方案，那么在任何情况下，摆弄z指数都应该是您的解决方案…

这里有两件事：

正如@diodeus所指出的，不要使用带浮动的绝对定位

我想你是想在桌子前关闭你的

#imageDiv

您需要清除

#媒体菜单{clear:both}

---

jsfdle:

这里有一个解决方案。使用大量的绝对定位和百分比，使一切工作。我不确定你想要的确切布局，所以我只是猜测一下

This requires code for me to post an answer

---

不要将浮动和绝对定位相结合。使用像素，而不是百分比。百分比不是使站点响应的最佳方法吗？它们是，但在这种情况下，文本的位置需要是与照片位置相比的已知值。您应该知道：#id{position:absolute；margin left:20；}除了位置之外，这是相同的：#id{position relative；left:20px；}不是相反吗？带相对和左侧的边距：带绝对值的边距为20。但我明白了。更改z索引只是将图片移到了前面，但现在文本卡在了图片后面。“但我遇到的问题是幻灯片下方的文本也堆积在图片上方。”从这一点上，我假设你想要这个。。。在做了这三件事之后，文本现在位于主图像的右侧，这就是我想要的位置，但是底部的5个图像仍然位于主图像的顶部。我做了{clear:tweet}，这将图像行向下移动了一点，对它没有多大影响。您是否关闭了开始表标记之前的#imageDiv

？然后从HTML的末尾删除

？是的。我现在能想到的最好的方法是，正如“Doctype html”所建议的那样，使用margin top将mediaMenu图像放在主图像的下方。JSFIDLE的外观是否不符合您的要求（图像下方的表格，图像右侧有“Tim Tebow talks…”？是的，这基本上就是我想要的，但我无法让它为我工作。