为什么我的元素在将位置从固定更改为静态时移动？

Question

所以我在我的网站上构建了我的导航栏，我将它必须的每个元素设置为 position: fixed，但我注意到它不太好看，我宁愿将它设置为 position: static，但这是我的问题：当我将位置从固定更改为静态时，我的元素在屏幕上的位置就会发生变化。

这是我的元素之一（按钮）的CSS：

.discord img{
  position: fixed;
  display: block;
  left: 3%;
  bottom: 93%;
  transform: scale(1);
  transition: 0.3s;
  filter: grayscale(1);
}

.discord img:hover{
  position: fixed;
  display: block;
  left: 3%;
  bottom: 93%;
  transition: 0.3s;
  transform: scale(1.1);
  cursor: pointer;
  filter: grayscale(0);
}

就好像 left: 3% 和 bottom: 93% 不再重要一样...

我该如何解决这个问题？

Answer 1

HTML 元素默认定位为静态。无需在您的 CSS 中定义它，除非您使用某种 library/framework 来定义元素的定位。

具有 position: fixed; 的元素相对于视口定位，这意味着即使滚动页面，它也始终位于同一位置。

这意味着，如果您设置 left: 3%; 和 bottom: 93%;，该元素将相对于视口 - 不是它的父容器，在本例中是 discord.

因此，除非您希望元素在滚动页面时出现在那里，否则不要使用 position:fixed;。如果您希望将导航栏设置到位并在滚动期间停留在那里，请仅将 position: fixed; 应用于导航栏的父项 - 包含所有 img-元素的完整容器。

Codepen: https://codepen.io/sigurdmazanti/pen/wvpPJPz

在其父容器上具有 position:fixed; 的示例片段：

body {
  height: 150vh;
  background-color: blue;
}

nav.fixed {
  width: 100%;
  position: fixed;
}

nav.static {
  width: 100%;
  padding-top: 100px;
}

ul {
  max-width: 50%;
  margin: 0 auto;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

li {
  background-color: white;
}

<body>
  <nav class="fixed">
    <ul>
      <li>fixed</li>
      <li>fixed</li>
      <li>fixed</li>
    </ul>
  </nav>

  <nav class="static">
    <ul>
      <li>static</li>
      <li>static</li>
      <li>static</li>
    </ul>
  </nav>
</body>

为什么我的元素在将位置从固定更改为静态时移动？

Why are my elements moving when changing position from fixed to static?

html

css

css-position