Question

我做了这个菜单，但是有一个问题：

HTML：

<html>
   <body>
      <div class="layer">
         <div class="banner">
            <div class="header-one">
               <div class="left-header">
                  <div class="border-l"></div>
               </div>
               <div class="middle-header">
               </div>
               <div class="right-header">
                  <div class="border-r"></div>
               </div>
            </div>
            <div class="header-two"></div>
         </div>
              <!-- <div class="page-in"></div> -->
      </div>

      <footer>
         <div class="footer"></div>
      </footer>
   </body>
</html>

CSS：

.banner {
    position: relative;
    z-index: 400;
}

.header-one {
    height: 60px;
    margin: auto;
    background-color: rgba(64, 64, 64, 0.85);
    position: relative;
    display: flex;
}

.left-header {
    width: 40%;
    margin: auto;
}

.border-l {
    position: absolute;
    border: solid 2px;
    top: 100%;
    right: 60%;
    left: 0;
}

.middle-header {
    width: 20%;
    margin: 5px;
}

.right-header {
    width: 40%;
    margin: auto;
}

.border-r {
    position: absolute;
    border: solid 2px;
    top: 100%;
    right: 0;
    left: 60%;
}

.header-two {
    height: 25px;
    width: 20%;
    background-color: rgba(64, 64, 64, 0.85);
    margin: auto;
    border-radius: 0 0 5px 5px;
    border: solid;
    border-top: 0;
}

.layer {
    background-color: rgba(64, 64, 64, 0.7);
    min-height: calc(100vh - 50px);
}

body {
    background-attachment: fixed;
    color: #666;
    background-color: rgba(20, 20, 20, 2);
    width: 100%;
    height: 100%;
    overflow: visible;
}

.page-in {
  height: 400px;
}

.footer {
  height: 10px;
    background-color: #404040;
    border-top: solid;
    position: relative;
    z-index: 400;
}

https://jsfiddle.net/e7ok6qjb/

您可以通过取消对div的注释来查看问题。菜单本身在移动。

页面加载时没有溢出，但是页面加载时有滚动条。问题在于菜单正在向左移动以考虑滚动条的大小。

我不想移动菜单，并且希望它的位置不依赖于滚动条。

我不知道该怎么做。我已经尝试过使用“绝对”，但这就像固定的一样，菜单紧随内容之后（并且在上方）

欢迎任何提示！

菜单的CSS绝对位置

0 个答案: