Jquery和CSS Z-index

Question

我一直在论坛中漫游以寻找这个问题的一些答案，但似乎没有一个符合我的代码。 我正在使用Awkward Gallery Slider和固定标题。问题是固定标题在加载下一个图像后就会落在滑块后面。

我设法在标题中使用Z-index属性，该标题在前面获取标题大约2秒，这很可能与下一个图像的自动加载有关。 Begginer在这里，所以任何帮助表示赞赏。 :-)

以下是代码：

$(document).ready(function()
{
	$("#showcase").awShowcase(
	{
		content_width:			700,
		content_height:			470,
		fit_to_parent:			false,
		auto:					true,
		interval:				3000,
		continuous:				false,
		loading:				true,
		tooltip_width:			200,
		tooltip_icon_width:		32,
		tooltip_icon_height:	32,
		tooltip_offsetx:		18,
		tooltip_offsety:		0,
		arrows:					true,
		buttons:				true,
		btn_numbers:			true,
		keybord_keys:			true,
		mousetrace:				false, /* Trace x and y coordinates for the mouse */
		pauseonover:			true,
		stoponclick:			false,
		transition:				'hslide', /* hslide/vslide/fade */
		transition_delay:		0,
		transition_speed:		500,
		show_caption:			'onload', /* onload/onhover/show */
		thumbnails:				false,
		thumbnails_position:	'outside-last', /* outside-last/outside-first/inside-last/inside-first */
		thumbnails_direction:	'vertical', /* vertical/horizontal */
		thumbnails_slidex:		1, /* 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. */
		custom_function:		null /* Define a custom function that runs on content change */
	});
});

.header-cont {
	position:fixed;
	top:0px;
	width:100%	
	z-index:100;
}

.header {
	height:250px;
	width:100%;
	background:url(../images/banner1.png);
	background-repeat:no-repeat;
	margin:0px auto;
	opacity:0.8;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity:0.8;
	position: fixed;
	left: 0%;
	-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
	-moz-box-shadow:    0px 3px 5px rgba(100, 100, 100, 0.49);
	box-shadow:         0px 3px 5px rgba(100, 100, 100, 0.49);
	text-align:center;
	z-index:100;
}

body
{
	font-family: Arial;
	font-size: 20px;
	line-height: 1.5;
	margin-top: 20px;
	margin-bottom: 30px;
}

a
{
	color: #ff377c;
}

p
{
	margin-bottom: 10px;
}

h1
{
	font-size: 20px;
	margin-bottom: 5px;
	font-weight: bold;
}

h2
{
	font-size: 16px;
	margin-bottom: 5px;
	font-weight: bold;
}

.menu
{
	margin-bottom: 40px;
	text-align: center;
	color: #999;
}

	.menu a
	{
		color: #999;
	}
	
	.menu a.active
	{
		font-weight: bold;
	}


/* Showcase
-------------*/

#awOnePageButton .view-slide
{
	display: none;
}

/* This class is removed after the showcase is loaded */
/* Assign the correct showcase height to prevent loading jumps in IE */
.showcase-load
{
	height: 470px; /* Same as showcase javascript option */
	overflow: hidden;
}

/* Container when content is shown as one page */
.showcase-onepage
{
	/**/
}

/* Container when content is shown in slider */
.showcase
{
	position: relative;
	top:400px;
	margin: auto;
	z-index:0;
}

	.showcase-content-container
	{
		background-color: #000;
		z-index:0;
	}
	
	/* Navigation arrows */
	.showcase-arrow-previous, .showcase-arrow-next
	{
		position: absolute;
		background: url('../images/arrows.png');
		width: 33px;
		height: 33px;
		top: 220px;
		cursor: pointer;
	}
	
	.showcase-arrow-previous
	{
		left: -60px;
	}
	
	.showcase-arrow-previous:hover
	{
		background-position: 0px -34px;
	}
	
	.showcase-arrow-next
	{
		right: -56px;
		background-position: -34px 0;
	}
	
	.showcase-arrow-next:hover
	{
		background-position: -34px -34px;
	}
	
	/* Content */
	.showcase-content
	{
		background-color: #000;
		text-align: center;
		z-index:0;
	}
		
		.showcase-content-wrapper
		{
			text-align: center;
			height: 470px;
			width: 700px;
			display: table-cell;
			vertical-align: middle;
			z-index:0;
		}
		
		/* Styling the tooltips */
		.showcase-plus-anchor
		{
			background-image: url('../images/plus.png');
			background-repeat: no-repeat;
		}
		
		.showcase-plus-anchor:hover
		{
			background-position: -32px 0;
		}
		
		div.showcase-tooltip
		{
			background-color: #fff;
			color: #000;
			text-align: left;
			padding: 5px 8px;
			background-image: url(../images/white-opacity-80.png);
		}
		
		/* Styling the caption */
		.showcase-caption
		{
			color: #000;
			padding: 8px 15px;
			text-align: left;
			position: absolute;
			bottom: 10px; left: 10px; right: 10px;
			display: none;
			background-image: url(../images/white-opacity-80.png);
		}
		
	.showcase-onepage .showcase-content
	{
		margin-bottom: 10px;
	}
	
	/* Button Wrapper */
	.showcase-button-wrapper
	{
		clear: both;
		margin-top: 10px;
		text-align: center;
	}
	
		.showcase-button-wrapper span
		{
			margin-right: 3px;
			padding: 2px 5px 0px 5px;
			cursor: pointer;
			font-size: 12px;
			color: #444444;
		}
	
		.showcase-button-wrapper span.active
		{
			color: #fff;
		}
	
	/* Thumbnails */
	.showcase-thumbnail-container /* Used for backgrounds, no other styling!!! */
	{
		background-color: #000;
	}
	
	.showcase-thumbnail-wrapper
	{
		overflow: hidden;
	}
		
		.showcase-thumbnail
		{
			width: 120px;
			height: 90px;
			cursor: pointer;
			border: solid 1px #333;
			position: relative;
		}
		
			.showcase-thumbnail-caption
			{
				position: absolute;
				bottom: 2px;
				padding-left: 10px;
				padding-bottom: 5px;
			}
			
			.showcase-thumbnail-content
			{
				padding: 10px;
				text-align: center;
				padding-top: 25px;
			}
			
			.showcase-thumbnail-cover
			{
				background-image: url(../images/black-opacity-40.png);
				position: absolute;
				top: 0; bottom: 0; left: 0; right: 0;
			}
		
		.showcase-thumbnail:hover
		{
			border: solid 1px #999;
		}
		
			.showcase-thumbnail:hover .showcase-thumbnail-cover
			{
				display: none;
			}
		
		.showcase-thumbnail.active
		{
			border: solid 1px #999;
		}
		
			.showcase-thumbnail.active .showcase-thumbnail-cover
			{
				display: none;
			}
	
	.showcase-thumbnail-wrapper-horizontal
	{
		padding: 10px;
	}
	
		.showcase-thumbnail-wrapper-horizontal .showcase-thumbnail
		{
			margin-right: 10px;
			width: 116px;
		}
	
	.showcase-thumbnail-wrapper-vertical
	{
		padding: 10px;
	}
	
		.showcase-thumbnail-wrapper-vertical .showcase-thumbnail
		{
			margin-bottom: 10px;
		}
		
	.showcase-thumbnail-button-backward,
	.showcase-thumbnail-button-forward
	{
		padding: 7px;
		cursor: pointer;
	}
	
	.showcase-thumbnail-button-backward
	{
		padding-bottom: 0px;
		padding-right: 0px;
	}
	
		.showcase-thumbnail-button-backward .showcase-thumbnail-vertical,
		.showcase-thumbnail-button-forward .showcase-thumbnail-vertical,
		.showcase-thumbnail-button-forward .showcase-thumbnail-horizontal,
		.showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
		{
			background-image: url(../images/arrows-small.png);
			background-repeat: no-repeat;
			display: block;
			width: 17px;
			height: 17px;
		}
		
		.showcase-thumbnail-button-backward .showcase-thumbnail-vertical
		{
			background-position: 0 -51px;
			margin-left: 55px;
		}
		.showcase-thumbnail-button-backward:hover .showcase-thumbnail-vertical
		{
			background-position: -17px -51px;
		}
		
		.showcase-thumbnail-button-forward .showcase-thumbnail-vertical
		{
			background-position: 0 -34px;
			margin-left: 55px;
		}
		.showcase-thumbnail-button-forward:hover .showcase-thumbnail-vertical
		{
			background-position: -17px -34px;
		}
		
		.showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
		{
			background-position: 0 -17px;
			margin-top: 40px;
			margin-bottom: 40px;
		}
		.showcase-thumbnail-button-backward:hover .showcase-thumbnail-horizontal
		{
			background-position: -17px -17px;
		}
		
		.showcase-thumbnail-button-forward .showcase-thumbnail-horizontal
		{
			background-position: 0 0;
			margin-top: 40px;
			margin-bottom: 40px;
		}
		.showcase-thumbnail-button-forward:hover .showcase-thumbnail-horizontal
		{
			background-position: -17px 0;
		}
		
		/* Hide button text */
		.showcase-thumbnail-button-forward span span,
		.showcase-thumbnail-button-backward span span
		{
			display: none;
		}
	

.clear
{
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	float: none;
}

<div class="header-cont">
	<div class="header">
    	<div id="header-text">CLINICAS | PROGRAMAS | MARCACOES | URGÊNCIA 
        </div>
  </div>
      </div>



<div style="width: 700px; margin: auto;">

  <div id="showcase" class="showcase">
		<!-- Each child div in #showcase represents a slide -->
		<div class="showcase-slide">
			<!-- Put the slide content in a div with the class .showcase-content -->
			<div class="showcase-content">
				<!-- If the slide contains multiple elements you should wrap them in a div with the class .showcase-content-wrapper. 
				We usually wrap even if there is only one element, because it looks better. :-) -->
				<div class="showcase-content-wrapper">
					<h1>Start.</h1>
					<h2>Creativity.</h2>
					<p>Logic.</p>
				</div>
			</div>
		</div>
		<!-- Each child div in #showcase represents a slide -->
		<div class="showcase-slide">
			<!-- Put the slide content in a div with the class .showcase-content. -->
			<div class="showcase-content">
				<img src="images/01.jpg" alt="01" />
			</div>
		</div>
		<!-- Each child div in #showcase 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="showcase-content-wrapper">
				</div>
			</div>
		</div>
		<!-- Each child div in #showcase represents a slide -->
		<div class="showcase-slide">
			<!-- Put the slide content in a div with the class .showcase-content. -->
			<div class="showcase-content">
				<img src="images/03.jpg" alt="03" />
			</div>
			<!-- Put the caption content in a div with the class .showcase-caption -->
			<div class="showcase-caption">
				It's a flying wasp. <a href="http://www.flickr.com/photos/14516334@N00/345009210/"></a>
			</div>
		</div>
		<!-- Each child div in #showcase 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="showcase-content-wrapper">
		
			</div>
		</div>
		<!-- Each child div in #showcase represents a slide -->
		<div class="showcase-slide">
			<!-- Put the slide content in a div with the class .showcase-content. -->
			<div class="showcase-content">
				<img src="images/02.jpg" alt="02" />
			</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. -->
					
				</a>
				<a href="http://www.awkward.se" coords="200,440">
					
				</a>
				<a href="http://www.awkward.se" coords="600,440">
					
				</a>
				<a href="http://www.awkward.se" coords="356, 172">
					<!-- You can add multiple elements to the anchor-tag which are displayed in the tooltip. -->
					<img src="images/glasses.png" />
				</a>
			</div>
		</div>
		<!-- Each child div in #showcase 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="showcase-content-wrapper">
					<h1>Simplicity</h1>
				</div>
			</div>
		</div>
		<!-- Each child div in #showcase represents a slide -->
		<div class="showcase-slide">
			<!-- Put the slide content in a div with the class .showcase-content. -->
			<div class="showcase-content">
				<iframe src="http://player.vimeo.com/video/1185346?title=0&amp;byline=0&amp;portrait=0" width="700" height="470" frameborder="0"></iframe>
			</div>
		</div>
		<!-- Each child div in #showcase 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="showcase-content-wrapper">
					<h1>Hospital do Elefante</h1>
				</div>
			</div>
		</div>
	</div>
		
</div>