CSS 定位样式对其他对象的影响

Question

我正在开展一个关于我最喜欢的科学故事的项目，使用 HTML 制作动画。当我正在处理它时，只需将 position 更改为 fixed 或我所有对象的位置都没有改变。如果从 #Guy 中删除 position 属性，您会注意到 Galileo 的形象将发生巨大变化。我只想知道为什么会这样。

:root {
  --initX: 280px;
  --initY: 70px;
  --finalY: 600px;
}

body {
  background-color: aqua;
  padding: 0px;
  margin: 0px;
}

#Guy {
  z-index: 4;
  height: 200px;
  position: fixed;
  width: auto;
  transform: translate(800px, 450px);
}

#Galilo {
  height: 50px;
  width: auto;
  z-index: -1;
  transform: translate(290px, 5px) rotateZ(4deg);
}

#tower {
  height: 650px;
  width: 150px;
  z-index: 0;
  transform: translate(250px, 50px) rotateZ(4deg);
  position: absolute;
  background-color: grey;
}

#Lball {
  height: 40px;
  width: 40px;
  z-index: 2;
  border-radius: 50%;
  transform: translate(var( --initX), var(--initY));
  background-color: blue;
  position: absolute;
  animation: lite 2s linear 1s infinite forwards;
}

#Hball {
  height: 50px;
  width: 50px;
  z-index: 3;
  transform: translate(calc(var( --initX) + 75px), var(--initY));
  border-radius: 50%;
  background-color: red;
  position: absolute;
  animation: heavy 2s linear 1s infinite forwards;
}

#floor {
  height: 25%;
  width: 100%;
  background-color: green;
  position: absolute;
  z-index: -1;
  transform: translate(0px, 565px);
}

#hide {
  height: 12%;
  width: 100%;
  background-color: green;
  position: absolute;
  z-index: 1;
  transform: translate(0px, 650px);
}

@keyframes lite {
  0% {
    transform: translate(var( --initX), var(--initY))
  }
  90% {
    transform: translate(var(--initX), calc(var(--finalY) + 12.5px))
  }
  100% {
    transform: translate(var(--initX), calc(var(--finalY) + 12.5px))
  }
}

@keyframes heavy {
  0% {
    transform: translate(calc(var( --initX) + 75px), var(--initY))
  }
  90% {
    transform: translate(calc(var( --initX) + 75px), var(--finalY))
  }
  100% {
    transform: translate(calc(var( --initX) + 75px), var(--finalY))
  }
}

<div id="tower"></div>
<div id="Hball"></div>
<div id="Lball"></div>
<div id="floor"></div>
<div id="hide"></div>
<img src="stick fidure.png" alt="Dude thinking" id="Guy">
<img src="galileo-galilei.png" alt="gallilo" id="Galilo">

P.S.

伽利略图像的 link 是 https://cdn.images.express.co.uk/img/dynamic/109/590x/galileo-galilei-819977.jpg 简笔画是用 Paint 3D 制作的

Answer 1

position: fixed 将元素从文档流中取出，并将其放置在与 viewport/window 相关的位置。通常这也会导致该元素与其他元素重叠。然而，其他元素将以固定元素不存在的方式重新排列（它不在文档流中）。所以 adding/removing position: fixed to/from 一个元素将对整个文档产生所有这些影响。

CSS 定位样式对其他对象的影响

CSS positioning styles impact on the other objects

html

css

css-position

css-animations