Question

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

HTML CODE

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

enter image description here

Answer 1

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

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

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

Answer 2

这里有几件事：

正如@diodeus指出的那样，不要使用带浮点数的绝对定位
我认为您打算在表格

#imageDiv

您需要清除#mediaMenu {clear:both}

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

Answer 3

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

This requires code for me to post an answer

http://jsfiddle.net/t3FNg/

绝对定位的幻灯片问题

3 个答案: