Question

在Chrome上测试：我只想让菜单贴在左下角。它显示我何时不使用bottom: 0。如果我使用top则可行。可能导致问题的原因是什么？

.mobile-menu {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 30px;
  width: 80px;
  z-index: 999;
  background-color: red;
}

<div class="wrapper">
  <nav class="mobile-menu">testing this menu</nav>
  <header class="header">
    <div class="main-logo">
      <object data="svg/main-logo.svg" type="image/svg+xml">
        <img src="fallback.jpg" />
      </object>
    </div>
    <nav class="main-nav">
      <ul>
        <li><a href="">About</a>
        </li>
        <li><a href="">Services</a>
        </li>
        <li><a href="">Contact</a>
        </li>
      </ul>
    </nav>
  </header>
</div>

Answer 1

制作.wrapper position: relative和.mobile-menu position: absolute。为了更好地说明您的问题，我在标题下添加了一些内容。因此绿色菜单= good，红色菜单= bad。

<强>解决方案

在演示中，我将红色菜单重命名为：.mobile-menuOriginal
我添加了相同的.mobile-menu并更改了background-color: green和position: absolute

原因

position: fixed会相对于视口放置一个元素，因此bottom:0将始终在屏幕底部放置一个元素。
position: relative放置与其原始位置相关的元素，因此将.wrapper置于position: relative而没有特定坐标（即top，{{1} }}，right和left），bottom保持原样。 .wrapper需要这样做的原因是它可能超出正常的流程。
.wrapper放置一个与其父级相关的元素，因此通过将position: absolute放入.mobile-menu定位，它会将自己定位在absolute的边界内，因为.wrapper是.wrapper的父级和最接近的元素。我提到最接近的位置，因为我对定位父母的说法有一些例外。在我误解你之前请参考这个article。

修改

@ t.niese进一步解释说：

[...] .wrapper需要这个的原因是它可能超出正常流程。 [...]流出来有点误导，因为元素与位置相关只有一个视觉位移到物体，但它仍然会像以前一样在流动中使用相同的空间，并且仍然会受到周围环境的影响，而绝对会将元素移出流动。

.mobile-menu

.wrapper {
  position: relative;
}
.mobile-menu {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 30px;
  width: 80px;
  z-index: 999;
  background-color: green;
}
.mobile-menuOriginal {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 30px;
  width: 80px;
  z-index: 999;
  background-color: red;
}

位置：使用底部时固定菜单消失：0

1 个答案: