jquery - 有多个 div 时如何正确应用 z-index

Question

我正在制作一个网站，在该网站的右侧有一个幻灯片和一个菜单。

我将尝试尽可能详细地解释这一点，还将提供代码和图片(见下文)。

幻灯片有 4 张图片和一个包含 4 个段落的菜单，当特定图片在幻灯片上处于事件状态时，这些段落会被标记。

例子:

图片一显示-------->paragraf one active图二显示-------->paragraf 2 active etc.

我还在每个幻灯片中有一个小矩形背景，其中包含文本:图片:

http://imageshack.us/photo/my-images/198/mysiteq.jpg/

如上图所示，我正在尝试添加一个指向幻灯片更改时的特定段落。如您所见，我添加了箭头，但问题是它出现在菜单后面。

我希望箭头的一半位于菜单顶部，但由于某种原因我无法使其正常工作。

我的 html:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProductsSectionHoverControl.ascx.cs" Inherits="TTLine.Templates.Units.ProductsSectionHoverControl" %>
<script type="text/javascript" src="/Scripts/JquerySlideShowPlugin.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
    $("#showcase").awShowcase(
    {
        content_width:          430,
        content_height:         205,
        fit_to_parent:          false,
        auto:                   true,
        interval:               3000,
        continuous:             true,
        loading:                true,
        tooltip_width:          200,
        tooltip_icon_width:     32,
        tooltip_icon_height:    32,
        tooltip_offsetx:        18,
        tooltip_offsety:        0,
        arrows:                 true,
        buttons:                false,
        btn_numbers:            true,
        keybord_keys:           true,
        mousetrace:             false, /* Trace x and y coordinates for the mouse */
        pauseonover:            true,
        stoponclick:            true,
        transition:             'vslide', /* hslide/vslide/fade */
        transition_delay:       300,
        transition_speed:       500,
        show_caption:           'onhover', /* onload/onhover/show */
        thumbnails:             true,
        thumbnails_position:    'outside-last', /* outside-last/outside-first/inside-last/inside-first */
        thumbnails_direction:   'vertical', /* vertical/horizontal */
        thumbnails_slidex:      0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
        dynamic_height:         false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
        speed_change:           true, /* Set to true to prevent users from swithing more then one slide at once. */
        viewline:               false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
    });
});

</script>

    <div id="showcase" class="showcase">
        <!-- Each child div in #showcase with the class .showcase-slide represents a slide. -->
        <div class="showcase-slide">
            <!-- Put the slide content in a div with the class .showcase-content. -->
            <div class="showcase-content">
                <div class ="One">Unna er en kryssning till Travemunde</div>
                <div class="ArrowOne"><img src="/images/ArrowUse.png" alt="01" width="100" height="50" /></div>
                <img src="/images/TTlineFlying.jpg" alt="01" width="430" height="200" />


            </div>
            <!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
            <div class="showcase-thumbnail">
                <!-- <img src="images/01.jpg" alt="01" width="140px" /> -->
                <!-- The div below with the class .showcase-thumbnail-caption contains the thumbnail caption. -->
                <p class="showcase-thumbnail-content">Kortresor</p>
                <!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
                <!-- <div class="showcase-thumbnail-cover"></div> -->
            </div>
            <!-- Put the caption content in a div with the class .showcase-caption -->
            <%--<div class="showcase-caption">
                <h2>Be creative. Get Noticed!</h2>
            </div>--%>
        </div> 
        <div class="showcase-slide">
            <div class="showcase-content">
                        <!-- white image with low opacity-->
                    <div class ="Two">Unna er en kryssning till Travemunde</div>
                <img src="/images/TTLineTest2.gif" alt="02" width="430" height="200" />
            </div>
            <div class="showcase-thumbnail">

                <p class="showcase-thumbnail-content">Kryssningar</p>

                <!-- <div class="showcase-thumbnail-cover"></div> -->
            </div>
            <!-- Put the tooltips in a div with the class .showcase-tooltips. -->
            <div class="showcase-tooltips">
                <!-- Each anchor in .showcase-tooltips represents a tooltip. The coords attribute represents the position of the tooltip. -->
                <a href="http://www.awkward.se" coords="634,130">
                    <!-- The content of the anchor-tag is displayed in the tooltip. -->
                    This is a tooltip that displays the anchor html in a nice way.
                </a>
                <a href="http://www.awkward.se" coords="200,440">
                    This is a tooltip that displays the anchor html in a nice way.
                </a>
                <a href="http://www.awkward.se" coords="600,440">
                    This is a tooltip that displays the anchor html in a nice way.
                </a>
                <a href="http://www.awkward.se" coords="356, 172">
                    <!-- You can add multiple elements to the anchor-tag which are display in the tooltip. -->
                    <img src="images/glasses.png" />
                    <span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">
                        White Glasses: 500$
                    </span>
                </a>
            </div>
        </div>
        <div class="showcase-slide">
            <div class="showcase-content">
                <div class ="Three">Boka konferens här!</div>
                <img src="/images/TTlineTest3.jpg" alt="03" width="430" height="200" />
            </div>
                <div class="showcase-thumbnail">
                <p class="showcase-thumbnail-content">Konferens</p>

                <!-- <div class="showcase-thumbnail-cover"></div> -->
            </div>  
        </div>
        <div class="showcase-slide">
            <div class="showcase-content">
                <div class ="Four">Unna er en kryssning till Travemunde</div>
                <img src="/images/TTLineTest4.jpg" alt="04" width="430" height="200" />
            </div>
            <div class="showcase-thumbnail">
                <p class="showcase-thumbnail-content">Shopping</p>
                <!-- <div class="showcase-thumbnail-content">Just some text<br/> I'm not <b>bold</b></div>
                <div class="showcase-thumbnail-cover"></div> -->
            </div>
        </div>      
    </div>

我的CSS:

.showcase-thumbnail
    {
        width: 170px;
        height: 50px;
        /* cursor: pointer;
        border: solid 1px #333; */
        position: relative; 
        bottom:10px;
        right: 11px;
        background: url(/Images/Button.png);

    }

    .One
    {
        position: absolute;
        top: 0px;
        left: 0;
        padding: 14px 0 0 0 !important;
        font-size: 135% !important;
        font: bold 0.8em arial;
        width: 430px;
        height: 35px;
        background-color: White;
        opacity:0.85;
    }

    .Two
    {
        position: absolute;
        top: 50px;
        left: 0;
        padding: 14px 0 0 0 !important;
        font-size: 135% !important;
        font: bold 0.8em arial;
        width: 430px;
        height: 35px;
        background-color: White;

    }

    .Three
    {
        position: absolute;
        top: 100px;
        left: 0;
        padding: 14px 50px 0 0 !important;
        font-size: 135% !important;
        font: bold 0.8em arial;
        width: 430px;
        height: 35px;
        background-color: White;
    }

    .Four
    {
        position: absolute;
        top: 150px;
        left: 0;
        padding: 14px 0 0 0 !important;
        font-size: 135% !important;
        font: bold 0.8em arial;
        width: 430px;
        height: 36px;
        background-color: White;
    }

    .ArrowOne
    {
        border:1px black solid;
        position: absolute;
        /*background: url("/images/ArrowUse.png");
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;*/
        left: 400px;
        top: 0px;
        opacity:100;
        z-index: 10000; 

    }

    .showcase-thumbnail p
    {
        text-align: left;
        padding: 5px 0 0 30px;
    }

    .showcase-thumbnail-caption
    {
        /*position: absolute;
        bottom: 2px;
        padding-left: 10px;
        padding-bottom: 5px;*/
    }

    .showcase-thumbnail-content
    {
        /* padding: 10px;
        text-align: center;
        padding-top: 25px; */

        padding: 0px 0px;
        /*border: 1px solid #dcdcdc;
        border-radius: 6px;*/
        color: #FBF8F8;
        text-decoration: none;
        font: bold 0.8em arial, sans-serif;
        width: 120px;
        font-size: 140%;
        cursor: hand; cursor: pointer; 
        }

有更多的 css 和整个 jquery 插件，但对于这个问题来说它是不相关的。

我最初从这个链接获取了演示 2:http://showcase.awkwardgroup.com/index2.html并将其更改为您在图片中看到的内容。

我尝试将 z-index: 1 添加到 ".showcase-thumbnail" 但它没有用，我尝试添加 z-index: 10000 到 showcase-content 没有结果，我也尝试了“showcase-thumbnail p”(当前 css 中未显示)但它没有给我我想要的结果.

如果需要更多信息，请询问，我会尽力提供。

谢谢!

Answer 1

当 z-index 不能正常工作时，通常是由于以下原因之一:

• 尚未设置定位。 Z-index 仅适用于具有设置位置属性的元素。
• 堆叠上下文。 z-index 为 5 的元素并不总是在 z-index 为 1 的元素上方。原因是什么？堆叠上下文 - 我建议您阅读这篇文章以帮助您理解堆叠上下文 - http://www.vanseodesign.com/css/css-stack-z-index/