CSS 动画在将动画应用于 <main> 元素时更改固定位置 <img>-解网

问：

我有一个标签，在该标签中，我有一个带有 . 一旦我将动画应用于标签，即使我已经应用了，它也会将图像移动到容器内部。<main><main><img>position: fixed;<main>position: fixed;

老实说，我毫无头绪。它不应该因为位置固定而移动，对吧？

我做了一个JSFiddle，所以你可以看到整个事情的运行情况。

一旦我在 scss 中评论动画，它就会起作用，并且图像会固定在左下角。

而且我无法在我正在处理的实际页面上编辑 html 结构。我只能编辑css。此外，也不允许使用JavaScript，因此只有CSS可用。

HTML格式：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <main>
      <img class="side-shadow" src="https://collection.ju.mp/assets/images/gallery18/ab27fde1_original.gif" />
      <h1 id="content">Content</h1>
    </main>
  </body>

</html>

SCSS：

main {
  
  /* Comment this animation to fix it but that's not what I want since I want the animation on the main element.
     And I cannot change the document html on the actual page I'm working on. I can only change the CSS.
  */
  animation: floating 2s infinite ease-in-out;

  width: 200px;
  margin: 0 auto 10px;
  background-color: hsl(0, 0%, 20%);
  color: white;
  padding: 1rem;
  border-radius: 1rem;
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0px);
    }
}

.side-shadow {
    position: fixed;
    left: 10px;
    object-fit: contain;
    bottom: 10px;
    max-height: 400px;
    z-index: -2;
}

#content {
  text-align: center;
}

WSG集团

const contentElement = document.querySelector("#content");
const mainElement = document.querySelector("main");

for (let i = 0; i < 100; i++) {
  const clone = contentElement.cloneNode(true);
  mainElement.appendChild(clone);
}

除了暂时删除动画之外，我没有尝试任何其他方法。我确实看过这个 StackOverflow 问题，但我无法解决它。

老实说，除了根本没有动画之外，我对如何解决这个问题一无所知。

css dom css-position

CSS 动画在将动画应用于 &lt;main&gt; 元素时更改固定位置 &lt;img&gt;

CSS Animation changes position fixed <img> when applying animation to <main> element

评论

CSS 动画在将动画应用于 <main> 元素时更改固定位置 <img>