Question

我正在尝试创建一个固定位置导航栏，它不是窗口的整个宽度，也没有附加到浏览器窗口。因此，在最大宽度为1200px时，它会停止并停留在那里，不会跟随浏览器的右边界，而在1200px以下，它会附加到浏览器的右侧以适合窗口。

下面的代码实现了我刚才描述的内容，但它不允许用户点击导航栏旁边的链接＆＃34;可点击＆＃34;。这是因为max-width:1200px和width: 100%强制我的导航栏与该页面上的任何其他内容重叠，我想以某种方式修复它。

＆＃13;

#navigation {
  position: fixed;
  max-width: 1200px;
  width: 100%;
  z-index: 0;
}
#navigation svg {
  float: right;
}
#navigation svg polyline {
  fill: #F7F7F7;
  stroke: #B9D7D9;
  stroke-width: 2;
}
#navigation ul {
  position: absolute;
  top: 3px;
  right: 0.8rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #F7F7F7;
}
#navigation li {
  float: left;
}

＆＃13;

<div id="navigation">
  <svg height="50" width="400">
    <polyline points="0,0 400,0 400,50 70,50 0,0" />
  </svg>
  <ul>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

<a href="#">Clickable</a>

＆＃13;

这是我希望在1200px窗口上发生的事情：

小于1200px的窗口：

Answer 1

您是否考虑过将@media查询用于与屏幕大小不同的布局？见http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

也许这个css代码可以解决你的问题

@media only screen and (min-width: 1201px) {
    #navigation {
        width:80%;
    }

@media only screen and (max-width: 1200px) {
    #navigation{
        width:100%;
    }

Answer 2

clickable链接无法点击，因为其z-index低于#navigations。要解决此问题，您可以使用以下样式（在此示例中我使用类.clickable）另外，如果在宽度超过1200像素的屏幕上进行适当的居中，您可以为#navigation添加更多定位，使其正确居中。

#navigation {
  position: fixed;
  max-width: 1200px;
  width: 100%;
  z-index: 0;
  
  /* Center #navigation (dont forget vendor prefixes for transform)*/
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
#navigation svg {
  float: right;
}
#navigation svg polyline {
  fill: #F7F7F7;
  stroke: #B9D7D9;
  stroke-width: 2;
}
#navigation ul {
  position: absolute;
  top: 3px;
  right: 0.8rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #F7F7F7;
}
#navigation li {
  float: left;
}

.clickable{
  display: inline-block;
  position: relative;
  z-index: 1;
}

<div id="navigation">
  <svg height="50" width="400">
    <polyline points="0,0 400,0 400,50 70,50 0,0" />
  </svg>
  <ul>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

<a href="#" class="clickable">Clickable</a>

Answer 3

我解决这个问题。由于我的最大宽度为1200px，导航宽度为400px，因此需要将其推向右侧800px。

如果屏幕宽度超过1200像素，我向右推导航栏800 px，如果屏幕小于1200像素右：0表示导航栏将附加到浏览器。

#navigation{
    position:fixed;
    z-index: 0;
    right: 0;
}

@media only screen and (min-width: 1200px) {
    #navigation{
        margin-left:800px!important;
        right: initial;
    }
}

固定位置导航栏不是窗口的全宽重叠链接等

3 个答案: