我想要一个有位置的div：fixed;在我的主要内容div后面，然后伸出包含左侧菜单的两侧。 （参见代码的jsbin链接）
这个想法很有效，虽然为了让菜单在外面突出并且在我的内容之后，我必须在菜单上使用z-index: -9999。
执行此操作会导致链接无法点击。
我该怎么做才能解决这个问题？
<!DOCTYPE html>
<html>
<head>
<title>Real Hardstyle Radio Foundation</title>
<meta charset="utf-8">
<style>
body {
background: rgb(20, 20, 20);
font-family: sans-serif;
font-size: 12px;
}
#wrapper {
margin: 0 auto;
width: 900px;
}
#navwrapper {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 5px solid rgb(200, 200, 200);
background: white;
position: fixed;
width: 750px;
margin-top: 100px;
padding: 20px;
z-index: -9999;
}
/* Attempts to make it clickable */
nav {
z-index: 9999;
float: left;
}
#content {
margin: 0px 150px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 5px solid rgb(200, 200, 200);
background: white;
padding: 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navwrapper">
<nav>
<a href="#home">Home</a><br>
<a href="#who">Who we are</a><br>
<a href="#what">What we do</a><br>
<a href="#licenses">Licenses</a><br>
<a href="#privacy">Privacy</a><br>
<a href="#tos">Terms of service</a><br>
<a href="#contact">Contact us</a>
</nav>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non metus at ligula molestie eleifend. Donec fermentum vehicula odio a luctus. Donec malesuada at magna egestas vestibulum. Vestibulum eu ligula erat. Sed tincidunt turpis venenatis enim sagittis tempor quis at enim. Praesent gravida sollicitudin ligula, quis elementum leo feugiat id. Nam at metus lectus. Donec tristique ante viverra, consequat ligula sed, ullamcorper nisl. Sed purus dui, egestas sit amet libero vel, mollis euismod ligula. Proin sed nisi fringilla, faucibus libero a, convallis magna. Morbi porta dui mauris, et tristique turpis facilisis vel. Maecenas condimentum vulputate felis, in fermentum sapien. Praesent bibendum purus elit, non varius purus vehicula feugiat. Ut fermentum, lectus id egestas rutrum, odio nibh accumsan mauris, sit amet ultricies felis dolor id nisi.
Morbi orci odio, tincidunt sed est nec, eleifend placerat velit. Duis turpis felis, bibendum eget luctus ut, bibendum eget odio. Donec aliquam pellentesque rutrum. Proin aliquam, urna non consequat elementum, sem augue fringilla odio, id aliquam elit ligula tincidunt leo. Quisque sit amet elementum libero, at consequat elit. Ut ac tempor purus. Morbi nisl nibh, consectetur fermentum consectetur vel, blandit et elit. Maecenas eget euismod erat. Mauris sed nunc enim.
Donec faucibus ante id neque sollicitudin, at luctus sapien sagittis. Vivamus dictum dui in ipsum ullamcorper sollicitudin. Donec vulputate ac massa a luctus. Suspendisse accumsan suscipit commodo. Maecenas non vehicula justo. In varius eros urna, in consectetur turpis eleifend at. Maecenas vulputate dignissim pulvinar. Sed id nunc nec purus malesuada consequat. Sed ut lectus at mi dignissim tempor. Aenean ac condimentum libero. Nullam aliquet at risus sit amet sollicitudin. Phasellus pellentesque arcu id neque viverra, sed mollis lectus rutrum. Nam ullamcorper, sem in fermentum tincidunt, quam leo convallis dolor, sed malesuada lectus magna quis odio. Donec vitae mattis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vivamus vitae est ipsum. Proin a rutrum nibh. Vivamus a sagittis mauris. Maecenas pharetra pretium nunc vitae condimentum. Quisque dignissim quam quis augue pretium, id facilisis sapien placerat. Etiam justo est, dignissim vehicula rutrum eget, congue sit amet massa. Donec interdum metus vel quam vehicula, eu luctus diam sodales. Integer velit lacus, vestibulum in mi eget, hendrerit feugiat nisi. Fusce nunc ante, euismod sed elit quis, ultrices laoreet erat. Mauris elit dolor, tempor vitae ipsum non, tempor scelerisque eros. Integer ultricies consectetur fermentum. Cras id consequat est, in condimentum felis. Mauris volutpat elit quis nibh facilisis, vel pulvinar metus sodales. Nulla laoreet, sem non dictum molestie, orci nulla dapibus mauris, sit amet dapibus nibh nisi vel lacus. Integer non metus dapibus, molestie sapien at, hendrerit est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt malesuada eros, vel ullamcorper felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur in eros non neque placerat tempus et quis enim. Donec ultricies, sapien a fringilla hendrerit, lorem nibh sodales mi, in auctor dui risus vel risus. In malesuada odio quis blandit faucibus. Vivamus lobortis, lorem quis hendrerit ultrices, purus ligula eleifend odio, non tincidunt ante tortor suscipit elit.
Donec ac sem semper, congue lectus sed, ultricies neque. Phasellus a elit suscipit, viverra dolor ac, eleifend arcu. Sed at blandit augue. Mauris lobortis bibendum aliquam. Curabitur ut feugiat ligula. Curabitur volutpat imperdiet sapien, eget iaculis nisl blandit et. Sed ultrices gravida malesuada. Mauris in erat nisi. Vivamus condimentum, leo sit amet dictum convallis, metus elit tristique nisl, id adipiscing elit mi sed augue. Nunc volutpat ipsum nibh, in varius turpis varius in.
Etiam accumsan volutpat lectus sit amet eleifend. Maecenas sit amet nibh vitae orci fermentum ultrices. Donec nisl nulla, volutpat ac velit porttitor, mollis fermentum lacus. Curabitur iaculis ante mi, non tempus nibh ornare sit amet. Cras vulputate malesuada vulputate. Etiam faucibus, turpis at dignissim iaculis, diam turpis tristique nulla, ac feugiat leo risus eget dui. Cras gravida turpis eu nisl suscipit, vitae suscipit ligula facilisis. Fusce ac commodo tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Praesent volutpat nisl ac ipsum volutpat, ac scelerisque sem euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec orci eget est hendrerit pellentesque a vitae sem. Etiam nulla nulla, condimentum ut viverra ut, pretium vel dui. Maecenas tristique ipsum non ante commodo, consequat varius lacus accumsan. Pellentesque at tempus orci. Etiam sagittis scelerisque lorem. Sed mauris nisl, sollicitudin in varius sit amet, bibendum in enim. Praesent ornare, lacus quis bibendum tempor, elit elit iaculis nibh, eu consequat quam dui posuere dui. Morbi mattis suscipit nulla, et sagittis massa rhoncus non. Proin elit lacus, faucibus vel rhoncus sit amet, rhoncus eget tellus. Fusce pulvinar sed lorem sed consectetur.
Etiam viverra posuere urna id rutrum. Aliquam semper nulla id vulputate aliquet. Aenean convallis dictum porta. Aenean nisi massa, adipiscing sit amet scelerisque et, ullamcorper at neque. Sed mollis tellus nec nulla suscipit, a eleifend diam tincidunt. In ut egestas dui. Pellentesque dictum nunc elit, nec eleifend lacus ornare at. Nullam lobortis tortor eget elit fringilla vestibulum. Suspendisse potenti. Ut dapibus, sem congue vulputate vulputate, augue dolor facilisis ligula, sit amet dignissim metus tortor sit amet neque.
Nulla facilisi. Pellentesque at nisl sem. Aliquam quis volutpat tellus. Quisque hendrerit mauris ac turpis molestie, a vehicula diam congue. Vivamus arcu diam, tincidunt ut nunc quis, ultrices porttitor arcu. Cras volutpat pellentesque dolor id accumsan. Aliquam semper mollis est vitae eleifend. Praesent vestibulum egestas fringilla. Suspendisse potenti. Nullam eget enim ac ante tristique suscipit vitae quis justo. Nunc quis nibh mollis orci luctus iaculis. Morbi lectus felis, molestie ac magna non, pulvinar eleifend elit. Nam a urna ut felis congue congue. Etiam suscipit nunc neque, at tempor lorem adipiscing viverra.
Quisque porttitor dapibus purus. Pellentesque luctus erat et est tincidunt, quis sodales libero luctus. Morbi venenatis tellus vel sapien fringilla rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at elit vel risus imperdiet scelerisque nec vitae est. Nulla congue nisi sit amet nisl consequat aliquet. Quisque iaculis sit amet lacus sit amet pharetra. Nulla consectetur mollis sem vel pulvinar.
Ut nec diam blandit, ornare lacus posuere, fermentum nulla. Morbi a est sit amet purus feugiat iaculis. Sed molestie malesuada cursus. Praesent viverra mollis ultrices. Curabitur posuere nunc id massa lacinia, hendrerit egestas urna rutrum. Aenean interdum metus et felis hendrerit suscipit non nec metus. Suspendisse ac adipiscing sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum malesuada scelerisque consequat. Integer faucibus ultrices libero in volutpat.
Ut viverra tempor lorem, vulputate mattis odio congue in. Vivamus pretium arcu eros, at luctus urna cursus eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam iaculis fermentum placerat. Ut sed auctor tellus. Nam egestas nisl a lectus molestie adipiscing. Proin sem tortor, placerat vitae ullamcorper placerat, hendrerit in turpis. Cras leo augue, euismod pulvinar elit in, viverra tempor odio. Nam eget tristique dui. Nam dignissim mi facilisis iaculis dictum. Donec at metus orci. Nullam egestas fermentum leo, non gravida neque sodales vel. Suspendisse facilisis rutrum nibh sit amet convallis. Phasellus blandit arcu a purus venenatis, vel bibendum urna placerat. Fusce lacinia in nisi at ultrices. Donec tempus iaculis ligula nec imperdiet.
Nunc sed fringilla diam, eu aliquet orci. Donec varius purus quis convallis vestibulum. Nulla at augue est. Vivamus aliquet velit id orci vestibulum vehicula. Nullam nec ultricies quam. Aenean nec nisi placerat, dapibus nisl sit amet, lacinia dui. Vivamus venenatis semper dui, eget pellentesque nibh rutrum at. Phasellus vitae posuere arcu.
Mauris condimentum quam purus, a porta odio accumsan ut. Suspendisse orci urna, adipiscing ac faucibus non, vehicula a neque. Proin adipiscing turpis non quam faucibus rhoncus. Aenean semper tincidunt augue, ut bibendum nulla interdum a. Fusce vitae libero quis tortor suscipit semper. Nulla libero mi, sodales a urna malesuada, facilisis facilisis eros. Vestibulum tempor nisi ligula, eu suscipit odio pretium nec. Nullam urna nulla, ultricies vel luctus et, vestibulum nec tortor. In pellentesque elit vitae justo tincidunt condimentum. Aliquam vitae malesuada nunc. Nulla pulvinar vestibulum volutpat. Mauris blandit elit in sem rhoncus fringilla. Fusce rutrum enim ut risus auctor pretium. Aliquam pharetra dolor ac lacinia pulvinar. Praesent molestie nec ipsum et lobortis.
Integer dignissim augue non congue adipiscing. Cras tristique quam vitae dui volutpat, nec posuere urna convallis. In suscipit malesuada lorem ac pulvinar. Donec nibh augue, eleifend faucibus elit in, mollis fermentum elit. Curabitur et tempus tellus. Suspendisse potenti. Morbi congue non enim non pellentesque. Donec scelerisque ut risus vitae porta. Vestibulum semper lorem eros, eget tristique dui convallis vel. Duis tempor augue vitae venenatis tristique. Sed gravida in arcu quis aliquam. Vivamus eros quam, lacinia quis sodales vel, euismod eget purus. Integer condimentum libero at metus molestie ornare.
Vestibulum vitae ornare lorem, ac tempus lorem. Fusce accumsan odio a diam blandit vulputate. Donec a velit vel felis sodales consequat a ac tellus. Nullam imperdiet euismod gravida. Fusce condimentum lorem orci, ac tincidunt nisl posuere ullamcorper. In erat sapien, adipiscing nec bibendum quis, bibendum nec sem. In adipiscing quis ligula vel auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus mauris, egestas in volutpat congue, laoreet eget lorem. Praesent sit amet aliquet ante.
Integer egestas, ipsum in mollis commodo, magna felis molestie risus, vel malesuada risus lectus id arcu. Curabitur convallis et dolor quis pretium. In purus ligula, sodales in nisi quis, posuere auctor velit. Morbi dictum hendrerit leo mattis auctor. Nunc et turpis et ligula sodales sagittis. Vestibulum cursus nisl dolor. Fusce quis velit aliquam massa condimentum ultrices ac ac magna. Praesent rutrum, turpis pellentesque pretium egestas, enim felis dictum massa, non dignissim risus tortor eu enim.
Pellentesque fermentum arcu at justo suscipit dictum. Fusce vitae metus eu nulla convallis aliquet sit amet sit amet quam. In elementum et ante eget vestibulum. Nunc faucibus porttitor feugiat. Mauris ut interdum dolor. Mauris fermentum posuere placerat. Pellentesque eget fringilla dolor. Praesent mauris nunc, aliquam et libero quis, egestas vehicula elit. Quisque interdum congue turpis a interdum. Nam nec semper sapien, aliquet aliquet est. Aenean nisi nunc, interdum a ante a, porta imperdiet odio. Nullam porta varius massa, in tempus orci tempor nec. Vestibulum felis felis, tempor ac tristique ac, fringilla et turpis. In quis sapien in sapien accumsan tincidunt.
Sed eu odio vel arcu mattis molestie non eget ante. Donec dui nisi, tempus non eleifend sit amet, mattis vitae purus. Praesent id ultricies turpis. Suspendisse hendrerit quam at dolor tristique, ut adipiscing odio interdum. Mauris eget feugiat lorem, sed mattis turpis. Quisque hendrerit tellus erat, vitae laoreet dui pretium sed. Nullam ut bibendum quam. Donec ornare congue magna vitae hendrerit. Vivamus luctus porta auctor. Suspendisse sollicitudin consequat nisi sit amet accumsan.
</div>
</div>
</body>
</html>
答案 0 :(得分：3)
不要将导航“放在后面”，而是删除其负面z-index并通过提供内容将内容置于前面
position: relative;
z-index: 1; /* anything > 0 really */
<强> Edited example