html - 固定左侧导航的问题

Question

我有一个简单的布局，有一个固定的左侧导航和一个居中的页面，现在问题是在低分辨率下，固定导航在我想要阻止的内容区域上，但我无法这样做。

Demo

知道如何让我的页面保持居中，甚至在屏幕分辨率较低时固定与它相邻的 div 而不会重叠我的元素

我想要的是这样的，不管它是什么分辨率，页面都应该居中，但是导航应该就在页面旁边，不应该与页面重叠

CSS

.page_wrapper {
    min-width: 750px;
    max-width: 750px;
    margin: 20px auto;
    border: 1px solid #ff0000;
}

.content_wrapper {
  margin: auto;
  max-width: 700px;
  margin-left: 120px;
}

p,
ul {
  margin: 0;
  padding: 0;
}
p {
  margin-bottom: 20px;
}
#nav {
  left: 300px;
  list-style: none;
  position: fixed;
  top: 20px;
}
#nav li {
  margin-bottom: 2px;
}
#nav a {
  background: #ededed;
  color: #666;
  display: block;
  font-size: 11px;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
#nav a:hover {
  background: #dedede;
}
#nav .current a {
  background: #666;
  color: #ededed;
}
.current {
  background: red;
}

.section {
  border-bottom: 5px solid #ccc;
  padding: 20px;
}
.section p:last-child {
  margin-bottom: 0;
}

Answer 1

据我所知，您在 #nav 上的“左”属性导致它始终位于距离左边距 300 像素的位置。删除它使左侧导航保持在左侧(而不是左侧 300 像素)。

代替:

#nav {
  left: 300px;
  list-style: none;
  position: fixed;
  top: 20px;
}

尝试

#nav {
  list-style: none;
  position: fixed;
  top: 20px;
}

参见 W3 Schools Left Property了解更多信息。

响应您的评论“这将使位置导航在页面的最左侧流动”:

添加一个 margin-left:20px; 属性