html - 绝对定位幻灯片问题

Question

所以我试图创建一个幻灯片，通过使用绝对定位将图片堆叠在一起，但我遇到的问题是幻灯片下方的文本也堆叠在图片的顶部。我尝试将图片放在一个包装器 div 中，它的位置是相对的，但这并没有做任何事情。如果有人看到问题，我真的很感激一些帮助。

代码

<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>  

CSS 代码

#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;
}   

Answer 1

这是一个解决方案。使用大量的绝对定位和百分比来让一切正常工作。我不确定您要使用的确切布局，所以我只是猜测

This requires code for me to post an answer

http://jsfiddle.net/t3FNg/

Answer 2

这里有几件事：

1. 正如@diodeus 指出的那样，不要将绝对定位与浮动一起使用

2. 我想你的意思是#imageDiv在桌子前关闭你的

3. 你需要清除#mediaMenu {clear:both}

JsFiddle：http: //jsfiddle.net/tc36z/1/

Answer 3

尝试将 z-index 设置为较低的任何 div 包装文本。假设它是 contentText 使用：

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

如果这不是您的确切解决方案，摆弄 z-indices 无论如何都应该是您的解决方案......