Question

我想创建一个固定的导航栏，我知道我肯定需要使用position：fixed; 但是因为我之前使用过display：flex，所以一旦我使用position：fixed，flex就不起作用了。

任何朋友都有一个好的解决方案吗？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid no-gutters media-resource-wrapper">
  <div class="row">
    <div class="col-sm-12 col-lg-4 text-center">
      <h2 class="boxheader-lead">Media & Public Relations Resource Center</h2>
    </div>
    <div class="col-sm-3 col-lg-2">
      <img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" alt="videos" class="img-fluid media-icon video" />
    </div>
    <div class="col-sm-6 col-lg-4">
      <img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" alt="support materials" class="img-fluid" />
    </div>
    <div class="col-sm-3 col-lg-2">
      <img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" alt="social" class="img-fluid media-icon social" />
    </div>
  </div>
</div>

CSS：

<nav class="MyBlog-menu">
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">CSS</a></li>
        <li><a href="">Python</a></li>
        <li><a href="">TECH</a></li>
        <li><a href="">OTHER</a></li>
    </ul>
</nav>

Answer 1

将position:fixed添加到.MyBlog-menu时，元素的上下文会发生变化。它现在漂浮在其他内容之上，并且失去了它的全页＆＃34;宽度和位置。您可以使用属性top, bottom, left, right重新定位菜单。

有关CSS中的position属性的更多信息，请查看以下网站：https://cssreference.io/property/position/

结果，如果你想保留例子中的间距，你可以这样做：

.MyBlog-menu{
    display: flex;
    align-items: center;
    flex:1;
    justify-content: center;
    background-color: #98eebc;
    opacity:0.7;
    filter:alpha(opacity=70);
    border-radius: 4px;
    height: 40px;

    left:10px;
    right:10px;
    top:10px;
    position: fixed;
}

https://jsfiddle.net/0bv04rso/5/

Answer 2

将position: fixed与display: flex一起使用是完全没问题的。

我怀疑当你添加position: fixed;时，它会导致nav的大小发生变化。这是因为当应用position: fixed时，它会将元素从文档流中取出。这意味着您需要明确定义nav元素的大小。

html,
body {
  padding: 0;
  margin: 0;
}

.MyBlog-menu {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  background-color: #98eebc;
  opacity: 0.7;
  filter: alpha(opacity=70);
  border-radius: 4px;
  position: fixed;
  width: 100%;
  height: 40px;
}

.MyBlog-menu ul {
  display: flex;
  justify-content: space-between;
  flex: 0.33;
  list-style: none;
}

.MyBlog-menu ul li {
  border-radius: 7px
}

.MyBlog-menu ul li a {
  text-decoration: none;
  color: #4c4c4c;
}

<nav class="MyBlog-menu">
  <ul>
    <li><a href="">HOME</a></li>
    <li><a href="">CSS</a></li>
    <li><a href="">Python</a></li>
    <li><a href="">TECH</a></li>
    <li><a href="">OTHER</a></li>
  </ul>
</nav>

<main>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content <br/>
 Content
</main>

如何在使用flexbox时制作固定的导航栏？

2 个答案: