谁能告诉我为什么在CSS的cubic-bezier函数中position:fixed是必需的？

Question

这是下面的代码，它有位置:fixed。如果我删除这一行，那么我的立方函数就不能简单地工作了。谁能告诉我这样的定位是如何工作的？此外，建议一些资源，以更好地理解定位。

​

<style>

  .balls{
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    position: fixed;  
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #ball1 { 
    left: 27%;
    animation-timing-function: linear;
  }
  #ball2 { 
    left: 56%;
    animation-timing-function: ease-out;
  }

@keyframes bounce {
  0% {
    top: 0px;
  } 
  100% {
    top: 249px;
  }
} 

</style>

<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>

​

Answer 1

用这个替换你的CSS，

.balls{
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    width: 50px;
    height: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #red { 
    position: absolute;
    left: 200px;
    animation-timing-function: linear;
  }
  #blue { 
    position: absolute;
    left: 500px;
    animation-timing-function: ease-out;
  }
@keyframes bounce {
  0%{
    top:0;
  }
  100%{
    top:200px;
  }
} 

为了让元素移动，您需要使用CSS

• 属性，它可以是相对的，也可以不是必需的，因为它会将元素固定在screen.So上，当您向下滚动时，对象将沿屏幕移动。

如果你想学习定位，你可以查看这个：https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

动画会更改要设置动画的元素的top和left属性。

只有当元素的位置设置为fixed、absolute或relative时，这些属性才会生效。

删除行position: fixed会将元素的位置设置为position: static，从而导致top和left属性无效。

有关定位的一些资源，请查看https://www.w3schools.com/css/css_positioning.asp

它解释了可以应用于元素的定位属性，以及top、bottom、right和left属性在每种情况下的作用。