如何将绝对定位元素重置到屏幕的左上角

Question

我目前正在尝试构建一个没有JS的汉堡包菜单，当点击它时，它应该会从上到下下降。Burgermenu位于屏幕的右上角，每次我想放下导航时，它都不是以中央为中心，而是在屏幕的最右边，与汉堡包div的左边框对齐。

我的css看起来是这样的：

@media (max-width: 1099px) {
  #menuToggle {
    display: block;
    position: relative;
    z-index: 1;
  }

  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
  }

  /*
   * hamburger
   */
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: black;
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }

   .
   . lots of animation
   . 

  /*
   * The Navmenu that has to drop down
   */
  #nav-menu {
    position: absolute;
    transform-origin: 0 0;
    background: orange;
    height: 100vh;
    width: 100vh;
  }
}

html：

<div id="menuToggle">
        <input type="checkbox" />

        <span></span>
        <span></span>
        <span></span>

        <nav id="nav-menu">
          <li>Functionality</li>

          <li>Run a node</li>

          <li>About DFINITY</li>

          <li>Contact formula</li>
        </nav>
 </div>

它的外观(箭头表示我希望它是怎样的)：

​

​

你可以想象，我希望它在屏幕的左上角。所以我可以

transform: translate(0, -100%);

当复选框未被选中时，

transform: none;

当它被检查时。

我一直认为，绝对定位从页面的流程中提取元素并重置它，但它不知何故就在我的汉堡包下面。转换-原点到0也不起作用。我在这里搞错什么了？

(不要担心会改变颜色)

Answer 1

您的菜单相对于它的父div #menuToggle定位。只需将#navMenu放在外部，即在body元素中作为直接子元素，并确保设置：

#navMenu {
    position: absolute;
    top: 0;
    left: 0;
    ...
}

您可能还必须将身体设置为position: relative。