Question

我尝试修复导航栏但是当我将position:fixed添加到css时它会向左流动

.grid__header {
 position:fixed;
 min-height: 164px;
 height: 164px;
 width:100%;
 display: -webkit-flex;
 display: flex;
 background: transparent;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-justify-content: space-between; /* Safari 6.1+ */
 justify-content: space-between;
}

容器类不会.grid__header起作用。如何解决？

Codepen code

Answer 1

当您添加position:fixed时，它会向左移动，使其居中，将以下CSS添加到.grid__header

position:fixed; left:0; right:0;

Answer 2

Position需要从left和top指定其位置。

  .grid__header {
     position:fixed;
    left:0; right:0;
     min-height: 164px;
     height: 164px;
     width:100%;
     display: -webkit-flex;
     display: flex;
    /* background: transparent; */
    
    background:#ccc;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-justify-content: space-between; /* Safari 6.1+ */
     justify-content: space-between;
    }
/*##setting height just for display##*/
body{height:1500px;margin:0;padding:0;}

<header class="grid__header"></header>

导航栏怎么办？

2 个答案: