我正在建立一个网站，我在右侧有幻灯片和菜单。
我将尝试尽可能详细地解释这一点，并提供代码和图片（如下所示）。
幻灯片显示有4张图片和一张带有4个paragrafs的菜单，当幻灯片中的特定图片处于活动状态时，这些图片会被标记。
示例：
图片显示---------＆gt; paragraf一个活跃 图片二显示---------＆gt; paragraf 2活跃等。
我在每个幻灯片中都有一个小的矩形背景，其中包含一个文本：picture：
http://imageshack.us/photo/my-images/198/mysiteq.jpg/
从上图中我可以看到，我正在尝试添加一个指向的箭头 幻灯片改变时的特定paragraf。我已经添加了箭头，但问题是它出现在菜单后面。
我希望将箭头的一半放在菜单的顶部，但出于某种原因，我无法让它工作。
我的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但没有结果，我也尝试了“展示-thumbnail p“（未在当前的css中显示），但它没有给我我寻求的结果。
如果需要更多信息，请询问，我会尽力提供。
谢谢！
答案 0 :(得分：0)
当z-index无法正常工作时，通常是由于以下原因之一：
答案 1 :(得分：0)
这是因为箭头和菜单按钮在DOM中不在同一级别。有了这个css，你的箭头将只在DIV中使用“showcase-content”类来“覆盖”元素。（。One和img）。
<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>
所以你需要找到“ArrowOne”的父母和DOM中同一级别的菜单按钮。 它们是：“showcase-content”和“showcase-thumbnail”。在“showcase-content”上放置更高的z-index而不是“showcase-thumbnail”，它应该没问题。
答案 2 :(得分：0)
这花了我一段时间，但我最终解决了它。
如果你在css中有overflow属性，你需要让它可见或者这不起作用。
我在jquery插件中有代码将overflow属性设置为隐藏。
我只是将show-case coontent overflow属性设置为visible，并对其进行了一些更改 展示缩略图，以便当我放大容器时菜单没有倒下，这很有效。
感谢帮助人员！