Css 负边缘响应流体/固定柱-导航不工作
我这里有一个演示来说明我的问题 这是一个简单的3列布局，其中 导航列（左）为固定宽度，内容列（右）为流动 我在内容上使用了负右边距 固定宽度列滑入的列 调整页面大小时，导航列应移到内容上方 我的问题是固定宽度列中的链接不起作用。当页面调整大小时 导航移动到内容上方，导航再次工作 我试着将固定宽度列的html放在内容下面，nav再次工作 但当窗口调整大小时，导航会低于内容 我假设导航不工作，因为它在内容中，但我如何修复它Css 负边缘响应流体/固定柱-导航不工作,css,responsive-design,Css,Responsive Design,我这里有一个演示来说明我的问题 这是一个简单的3列布局，其中 导航列（左）为固定宽度，内容列（右）为流动 我在内容上使用了负右边距 固定宽度列滑入的列 调整页面大小时，导航列应移到内容上方 我的问题是固定宽度列中的链接不起作用。当页面调整大小时 导航移动到内容上方，导航再次工作 我试着将固定宽度列的html放在内容下面，nav再次工作 但当窗口调整大小时，导航会低于内容 我假设导航不工作，因为它在内容中，但我如何修复它 <!DOCTYPE html> <ht
<!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；
填充：0；
}
李{
列表样式：无；
}
身体{
背景：#f5f3url（'../images/bg.png'）0 0 repeat-x；
字体：10px无衬线；
字号：1em；
}
a{
颜色：黑色；
文字装饰：无；
}
#换页{
最大宽度：1000px；
保证金：0自动；
左边框：20px透明实心；
右边框：20px透明立体；
}
/*-----------------
结构
-------------------*/
标题{
高度：50px；
}
#rightCol{
浮动：对；
宽度：100%；
左边距：-386px；
}
#右col#右col内{
左边距：386px；
背景：#fff；
填充：20px；
}
#左上校，
#米德尔科尔{
背景：#eee；
浮动：左；
}
#左撇子{
宽度：141px；
裕度：0 10px 0 0；
}
#米德尔科尔{
宽度：225px；
}
#左舷导航，
#米德尔科勒{
填充：10px；
}
#李中校，
#米德尔科勒·乌利{
边框顶部：1件纯黑；
}
#李上校,，
#米德尔科鲁利阿{
显示：块；
填充：10px 12px；
字号：1em；
保证金：4px0；
颜色：#555；
}
#左上校：悬停，
#迈克：停下来{
背景：红色；
}
/*--------------------
媒体查询
---------------------*/
@仅介质屏幕和（最大宽度：780px）{
#rightCol{
浮动：无；
宽度：100%；
保证金：0；
}
#右col#右col内{
保证金：0；
背景：#fff；
}
#左上校，
#米德尔科尔{
浮动：无；
显示：块；
利润率：10px0；
宽度：100%；
}
#左列导航{
浮动：无；
}
#李中校，
#米德尔科勒·乌利{
显示：内联块；
边界：0；
}
#李上校,，
#米德尔科利a{
显示：内联块；
填充：10px 12px；
右边框：1px实心#999；
边界顶部：0；
边界底部：0；
}
}
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
#rightCol {
position: relative;
z-index: -1;
}