為什么在將位置從固定更改為靜態時我的元素會移動？-有解無憂

所以我在我的網站上構建我的導航欄，我設定了它必須的每個元素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%不再重要......

我怎樣才能解決這個問題？

uj5u.com熱心網友回復：

默認情況下，HTML 元素是靜態定位的。無需在 CSS 中定義它，除非您使用某種定義元素定位的庫/框架。

元素position: fixed;相對于視口定位，這意味著即使頁面滾動，它也始終保持在同一位置。

這意味著如果您設定left: 3%;and bottom: 93%;，則元素將相對于視口位于左側 97% 處和底部（非常靠近頂部）的 93% 處 - 而不是其父容器，在本例中為discord.

因此，除非您希望元素在滾動頁面時出現，否則不要使用position:fixed;. 如果您希望您的導航欄在滾動期間設定到位并停留在那里，則僅適用position: fixed;于導航欄的父級 - 包含所有 - 元素的完整容器img。

代碼筆： 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/455020.html

標籤：html css CSS位置

上一篇：CSS未連接到HTMLFlask

下一篇：在串列的情況下洗掉垂直邊框線的最后一部分