我正在制作一个网站，其中右侧有幻灯片和菜单。
我将尝试尽可能详细地解释这一点，并且还将提供代码和图片（如下所示）。
幻灯片有 4 张图片和一个带有 4 个段落的菜单，当幻灯片上的特定图片处于活动状态时，这些段落会被标记。
例子：
图片一显示--------->段落一活动 图片二显示--------->段落 2 活动等。
我还在每个幻灯片中都有一个小的矩形背景，其中包含一个文本：图片：
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: 1to".showcase-thumbnail"但它没有用，我尝试添加z-index: 10000没有showcase-content结果，我还尝试了“showcase-thumbnail p”（当前css中未显示）但它没有给我我寻求的结果.
如果需要更多信息，请询问，我会尽力提供。
谢谢！