CSS：导航下拉到图像滑块后面
我创建了以下网页，并且刚刚添加了Beaver Image Slider但是当图像滑块运行时，导航下拉显示在图像后面，无法导航到下拉列表中的链接。看起来像
这是我的代码
http://jsfiddle.net/dilukshan/n4gcV/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DoIT</title>
<link href="<?php echo BASE_URL; ?>static/css/style.css" rel="stylesheet" type="text/css" />
<script src="<?php echo BASE_URL; ?>static/js/jquery-1.11.0.min.js"></script>
<script src="<?php echo BASE_URL; ?>static/js/beaverslider.js"></script>
<script src="<?php echo BASE_URL; ?>static/js/beaverslider-effects.js"></script>
<script>
$(function(){
var slider = new BeaverSlider({
structure: {
container: {
id: "my-slider",
width: 920,
height: 500
}
},
content: {
images: [
"<?php echo BASE_URL; ?>static/images/img1.png",
"<?php echo BASE_URL; ?>static/images/img2.png"
]
},
animation: {
effects: effectSets["slider: big set 2"],
interval: 3000
}
});
});
</script>
</head>
<body>
<div class="contentarea">
<?php include 'header.php';?>
<div class="clear"></div>
<div class="level">
<div class="imgsliderarea">
<div id="my-slider"></div>
</div>
</div>
<div class="clear"></div>
<div class="level">
<div class="summaryboxarea">
<div class="summarybox">
<div class="shadowmkr">
<center>
<img src="<?php echo BASE_URL; ?>static/images/Flaticon_14323.png" width="128" height="128" />
</center>
<h2 align="center">Who We Are</h2>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
<center><a href="#" class="button-orange">Read More</a></center>
</div>
</div>
<div class="summarybox">
<div class="shadowmkr">
<center>
<img src="<?php echo BASE_URL; ?>static/images/Flaticon_42968.png" width="128" height="114" />
</center>
<h2 align="center">What Makes Our Courses Unique</h2>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
<center><a href="#" class="button-orange">Read More</a></center>
</div>
</div>
<div class="summarybox">
<div class="shadowmkr">
<center>
<img src="<?php echo BASE_URL; ?>static/images/Flaticon_44520.png" width="128" height="128" />
</center>
<h2 align="center">What Makes Our Solutions Unique</h2>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
<center><a href="#" class="button-orange">Read More</a></center>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="level">
<div class="newsarea">
<div class="newsbox">
<div class="shadowmkr">
<div class="captionbar orangegradient"> News and Events</div>
<div class="spacebar"></div>
<p align="justify"><img style="margin-right:10px" align="left" src="<?php echo BASE_URL; ?>static/images/student.png" width="187" height="150" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq.</p>
<br />
</div>
</div>
<div class="offerbox">
<div class="shadowmkr">
<div class="captionbar orangegradient"> Special Offer</div>
<div class="spacebar"></div>
<p align="justify"><img align="left" src="<?php echo BASE_URL; ?>static/images/special_offer.png" width="162" height="150" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="level">
<div class="newsarea">
<div class="newsbox">
<div class="captionbar orangegradient"> Technology Friends</div>
<div class="clear"></div>
<div align="center" class="freecontent">
<img src="<?php echo BASE_URL; ?>static/images/java-icons.png" width="60" height="60" /> <img src="<?php echo BASE_URL; ?>static/images/php-icons.png" width="60" height="60" /> <img src="<?php echo BASE_URL; ?>static/images/mysql-icons.png" width="60" height="60" /> <img src="<?php echo BASE_URL; ?>static/images/netbeans-logos.png" width="60" height="60" /> <img src="<?php echo BASE_URL; ?>static/images/wordpress-icons.png" width="60" height="60" /> <img src="<?php echo BASE_URL; ?>static/images/html5-logos.png" width="60" height="60" /> <img src="<?php echo BASE_URL; ?>static/images/css3-logos.png" width="60" height="60" />
</div>
</div>
<div class="offerbox">
<div class="captionbar orangegradient"> Find Us</div>
<div class="freecontent" align="center"><img src="<?php echo BASE_URL; ?>static/images/LinkedIn-icon.png" width="54" height="54" /> <img src="<?php echo BASE_URL; ?>static/images/Facebook-icon.png" width="54" height="54" /> <img src="<?php echo BASE_URL; ?>static/images/Twitter-icon.png" width="54" height="54" /></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="level orangegradient">
<div class="footerarea">
<div class="termsdiv"><a href="#" style="text-decoration:none;color:#FFF">Privacy Policy</a> | <a href="#" style="text-decoration:none;color:#FFF">Terms of Use</a> | <a href="#" style="text-decoration:none;color:#FFF">Site Map</a></div>
<div class="copyrightdiv"><a>© 2014 DoIT Technology Institute & Solutions.</a></div>
</div>
</div>
</div>
</body>
</html>
CSS文件
body{
margin:0px;
padding:0px;
}
.contentarea{
width:100%;
height:auto;
max-width:100%;
}
.level{
height:auto;
}
.headerarea{
height:120px;
width:960px;
margin:auto;
}
.imgsliderarea{
height:500px;
width:920px;
padding:20px;
margin:auto;
z-index: -10;
}
.courseimg{
height:300px;
width:920px;
padding:20px;
margin:auto;
}
.summaryboxarea{
width:960px;
height:auto;
margin:auto;
}
.summarybox{
width:280px;
min-height:200px;
padding:20px;
height:auto;
float:left;
}
.newsarea{
width:960px;
height:auto;
margin:auto;
}
.newsbox{
width:600px;
height:auto;
float:left;
padding:20px;
}
.offerbox{
width:280px;
height:auto;
float:left;
padding:20px;
}
.footerarea{
width:960px;
min-height:120px;
height:auto;
margin:auto;
}
.gradient{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
.orangegradient{
background: #feb71d; /* Old browsers */
background: -moz-linear-gradient(top, #feb71d 0%, #eda60c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feb71d), color-stop(100%,#eda60c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #feb71d 0%,#eda60c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #feb71d 0%,#eda60c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #feb71d 0%,#eda60c 100%); /* IE10+ */
background: linear-gradient(to bottom, #feb71d 0%,#eda60c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feb71d', endColorstr='#eda60c',GradientType=0 ); /* IE6-9 */
}
.partnersarea{
width:920px;
padding:20px;
margin:auto;
height:auto;
min-height:60px;
}
.shadowmkr{
-webkit-box-shadow: 1px 1px 20px 0px rgba(50, 50, 50, 0.36);
-moz-box-shadow: 1px 1px 20px 0px rgba(50, 50, 50, 0.36);
box-shadow: 1px 1px 20px 0px rgba(50, 50, 50, 0.36);
padding:20px;
}
.freecontent{
width:100%;
height:auto;
padding-top:20px;
float:left;
}
.clear{
clear:both;
}
/* Typography */
h2{
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
color:#ffb108;
}
.captiontext{
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
color:#ffb108;
}
.filltext{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#666;
}
p{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#333;
}
.footertext{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#FFF;
}
.borderline{
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#ffb108;
}
/* Buttons */
.button-orange {
-moz-box-shadow:inset 0px 1px 0px 0px #feb71d;
-webkit-box-shadow:inset 0px 1px 0px 0px #feb71d;
box-shadow:inset 0px 1px 0px 0px #feb71d;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #feb71d), color-stop(1, #eda60c) );
background:-moz-linear-gradient( center top, #feb71d 5%, #eda60c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb71d', endColorstr='#eda60c');
background-color:#feb71d;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
display:inline-block;
color:#ffffff;
font-family:Verdana;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
padding-left:20px;
padding-right:20px;
}
.button-orange:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f87a0a), color-stop(1, #f87a0a) );
background:-moz-linear-gradient( center top, #f87a0a 5%, #f87a0a 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f87a0a', endColorstr='#f87a0a');
background-color:#f87a0a;
}.button-orange:active {
position:relative;
top:1px;
}
/*grids*/
.col4{
width:32%;
height:auto;
float:left;
padding:2%;
}
.col8{
width:58%;
height:auto;
float:left;
padding:2%;
padding-top:60px;
}
/*menu items*/
.navitem{
height:25px;
width:120px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size:16px;
font-weight:bold;
color:#ffb108;
float:left;
padding-top:5px;
}
.captionbar{
width:100%;
height:27px;
padding-top:3px;
float:left;
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
color:#FFF;
font-weight:bold;
}
.spacebar{
width:100%;
height:20px;
float:left;
}
.navitem:hover{
background-color:#ffb108;
color:#FFF;
cursor:pointer;
} .copyrightdiv {
float: left;
height: 40px;
width: 100%;
padding-left:1%;
padding-top: 10px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#FFF;
}
.termsdiv {
float: left;
height: 30px;
width: 99%;
padding-left:1%;
padding-top: 30px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#FFF;
border-bottom-color:#ffb921;
border-bottom-width:1px;
border-bottom-style:solid;
}
/*Navigation menu*/
#nav {
padding-left:40px;
}
#nav_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #ffb108;
}
#nav ul li a{
color: #ffb108;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-weight:bold;
display: block;
padding: 10px;
text-decoration: none;
}
#nav ul li a:hover{
color:#FFF;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #ffb108;
border-top: 0;
margin-left: 0px;
}
#nav ul ul li {
display: block;
width:200px;
}
#nav ul ul li a{
color: #FFF;
font-weight:normal;
}
#nav ul li:hover a {
color: #fff;
}
#nav ul ul li a:hover {
color: #333;
}
/*Navigation Menu */
请建议我一个解决方案。
3 个答案:
答案 0 :(得分：3)
尝试关注css，无需提供否定z-index
.headerarea{
position: relative;
z-index: 90;
}
.imgsliderarea{
position: relative;
z-index: 80
}
选中 Demo
答案 1 :(得分：1)
Z-index仅适用于具有位置的元素，因此将.imgsliderarea的位置设置为相对（因此它不会改变DOM的流程）并且它将修复：
position: relative;
答案 2 :(得分：1)
下拉列表位于滑块后面，因为它的z-index属性低于滑块的属性。
因此，要解决您的问题，请按照以下两个方向之一修改您的CSS：
- 将下拉列表的z-index属性增加到高于滑块的z-index属性，或
- 将滑块的z-index属性降低到下拉列表的z-index属性。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？