我在这里有一个演示来说明我的问题。
这是一个简单的响应式3列布局，其中两个 导航列（左）是固定宽度，内容列（右）是流动的。
我在内容上使用负右边距做了这个 固定宽度列滑入的列。
调整页面大小时，导航列应移到内容之上。
我的问题是固定宽度列中的链接不起作用。页面调整大小时 并且导航在导航再次运行的内容之上移动。
我尝试将html用于内容下方的固定宽度列，导航再次工作 但是当窗口调整大小时，导航将低于内容。
http://www.ttmt.org.uk/forum/index1.html
我假设导航无法正常工作，因为它在内容中但我该如何解决。
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
body{
background:#f5f5f3 url('../images/bg.png') 0 0 repeat-x;
font:10px sans-serif;
font-size:1em;
}
a{
color:black;
text-decoration:none;
}
#pageWrap{
max-width:1000px;
margin:0 auto;
border-left: 20px transparent solid;
border-right: 20px transparent solid;
}
/*-----------------
Structure
-------------------*/
header {
height:50px;
}
#rightCol{
float:right;
width:100%;
margin-left:-386px;
}
#rightCol #rightCol-inner{
margin-left:386px;
background:#fff;
padding:20px;
}
#leftCol,
#middleCol{
background:#eee;
float:left;
}
#leftCol{
width:141px;
margin:0 10px 0 0;
}
#middleCol{
width:225px;
}
#leftCol nav,
#middleCol ul{
padding:10px;
}
#leftCol nav li,
#middleCol ul li{
border-top:1px solid black;
}
#leftCol li a,
#middleCol ul li a{
display:block;
padding:10px 12px;
font-size:1em;
margin:4px 0;
color:#555;
}
#leftCol li a:hover,
#middleCol li a:hover{
background:red;
}
/*--------------------
Media Queries
---------------------*/
@media only screen and (max-width : 780px) {
#rightCol{
float:none;
width:100%;
margin:0;
}
#rightCol #rightCol-inner{
margin:0;
background:#fff;
}
#leftCol,
#middleCol{
float:none;
display:block;
margin:10px 0;
width:100%;
}
#leftCol nav{
float:none;
}
#leftCol nav li,
#middleCol ul li{
display:inline-block;
border:0;
}
#leftCol li a,
#middleCol li a{
display:inline-block;
padding:10px 12px;
border-right: 1px solid #999;
border-top:0;
border-bottom:0;
}
}
</style>
</head>
<body>
<div id="pageWrap">
<header>
</header>
<div id="pageContent" class="group">
<aside id="leftCol">
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</aside><!--leftCol-->
<aside id="middleCol">
<ul id="second-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</aside><!--middleCol-->
<section id="rightCol">
<div id="rightCol-inner">
<div class="serviceText">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div><!-- #rightCol-inner -->
</section><!--rightCol-->
</div><!-- pageContent-->
</div><!-- #pageWrap -->
</body>
</html>
答案 0 :(得分：1)
#rightCol {
position: relative;
z-index: -1;
}
注意IE＆lt; 9可能需要更多的说服力。