Question

导航栏中的某些链接无法正常运行。它们似乎被iframe元素所掩盖，并且不会改变颜色。

iframe元素明显位于导航栏下方，但我使用.wrapper1重新定位iframe元素。当我删除iframe元素或删除.wrapper1对象时，问题消失（链接工作）。

洞察？

<!DOCTYPE html>

<html>
<head>
<title></title>
<style type="text/css">

.wrapper1 {position:fixed; left:50%; top:80px;}

iframe {
background: rgba(256,256,256,0);
position:relative;
top:60px;
left:-400px;

}
ul {
width:800px;
position:relative;
left:-50%;
list-style: none;
background: none;
margin:0px;
padding:0px;
}

li {
background:none;
display:inline;
width:100%;
padding-left:40px;
color:#FFF;
font-size: 16pt;
font-family:'Rammetto One', cursive;
}

a {
text-decoration: none;
color:#FFF;
}

a:hover, a:active {
color:#333;
}
</style>

</head>

<body bgcolor="#000">

<div class="wrapper1">

<ul>
<li><a href="introduction.html" target="content_frame">Introduction</a></li>
<li><a href="services.html" target="content_frame">Services</a></li>
<li><a href="testimonials.html" target="content_frame">Testimonials</a></li>
<li><a href="contact-us.html" target="content_frame">Contact Us</a></li>
</ul>

<div>



<div class="wrapper1">
<iframe name="content_frame" width="800" height="300"></iframe>
</div>


</body>
</html>

Preview（jsFiddle）

Answer 1

添加

z-index: 1;

到“ul”就像这样：

ul {
    width:800px;
    position:relative;
    left:-50%;
    list-style: none;
    background: none;
    margin:0px;
    padding:0px;
    z-index: 1;
}

Link to Demo

<a> Links Not Visible, Appears Related to Position:Fixed?</a>的一半

1 个答案: