固定位置相对于父Div与滑动侧边栏(Fixed Position Relative to Parent Div with sliding sidebar)

我希望我的侧边栏在打开时将内容推送到我已经完成但我的固定导航保持在左侧的位置：0px; 相对于veiwport而不是相对定位的父元素。我的导航是100％

我的侧边栏在firefox上正常工作但在chrome中突破了父级

链接到jsfiddle

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Test Page</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> </head> <body> <div id="sidebar"> </div> <div class="content"> <div id="nav"> <p class="button"></p> </div> </div> <script type="text/javascript"> $('.button').click(function(){ $('.content').toggleClass('slide'); }); </script> </body> </html>

我的CSS

@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } *{ margin: 0; padding: 0; } #sidebar{ position: fixed; left: 0; top: 0; width: 250px; background: rgb(60,60,60); float:left; height: 600px; z-index: -1; } .content{ position: relative; left: 0; top: 0; width: 100%; height:600px; background: #FFF; -moz-transition:all 0.4s ease-in-out; -webkit-transition:all 0.4s ease-in-out; } .slide{ left: 250px; } #nav{ position: fixed; top: 0; background: #0af; width: 100%; box-shadow: 1px 1px #ddd; } #nav p:before{ content: "\e000"; } .button{ font-family: 'icomoon'; font-size: 2em; color: #FFF; cursor: pointer; margin: 10px; }

在这里查看

I would like my sidebar to push the content across when opened which i have achived but my fixed navigation stays at the position of Left: 0px; relative to the veiwport rather than the relative positioned parent element. my nav's with is 100%

my sidebar works fine on firefox but breaks out of parent in chrome

link to jsfiddle

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Test Page</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> </head> <body> <div id="sidebar"> </div> <div class="content"> <div id="nav"> <p class="button"></p> </div> </div> <script type="text/javascript"> $('.button').click(function(){ $('.content').toggleClass('slide'); }); </script> </body> </html>

MY CSS

@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } *{ margin: 0; padding: 0; } #sidebar{ position: fixed; left: 0; top: 0; width: 250px; background: rgb(60,60,60); float:left; height: 600px; z-index: -1; } .content{ position: relative; left: 0; top: 0; width: 100%; height:600px; background: #FFF; -moz-transition:all 0.4s ease-in-out; -webkit-transition:all 0.4s ease-in-out; } .slide{ left: 250px; } #nav{ position: fixed; top: 0; background: #0af; width: 100%; box-shadow: 1px 1px #ddd; } #nav p:before{ content: "\e000"; } .button{ font-family: 'icomoon'; font-size: 2em; color: #FFF; cursor: pointer; margin: 10px; }

VIEW HERE