图层

与普通网站不同，视频具有固定的尺寸。这意味着可以使用 position: "absolute"！

在 Remotion 中，您经常希望将元素“层叠”在一起。
这是视频编辑器和 Photoshop 中的常见模式。

一个简单的方法是使用 <AbsoluteFill> 组件：

MyComp.tsx
tsx
import React from "react";
import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <AbsoluteFill>
        <Img src={staticFile("bg.png")} />
      </AbsoluteFill>
      <AbsoluteFill>
        <h1>This text appears on top of the video!</h1>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

MyComp.tsx
tsx
import React from "react";
import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <AbsoluteFill>
        <Img src={staticFile("bg.png")} />
      </AbsoluteFill>
      <AbsoluteFill>
        <h1>This text appears on top of the video!</h1>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

这将在图像上方呈现文本。

如果您只想在特定持续时间内显示一个元素，可以使用 <Sequence> 组件，默认情况下也是绝对定位的。

MyComp.tsx
tsx
import React from "react";
import { AbsoluteFill, Img, staticFile, Sequence } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Sequence>
        <Img src={staticFile("bg.png")} />
      </Sequence>
      <Sequence from={60} durationInFrames={40}>
        <h1>This text appears after 60 frames!</h1>
      </Sequence>
    </AbsoluteFill>
  );
};

MyComp.tsx
tsx
import React from "react";
import { AbsoluteFill, Img, staticFile, Sequence } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Sequence>
        <Img src={staticFile("bg.png")} />
      </Sequence>
      <Sequence from={60} durationInFrames={40}>
        <h1>This text appears after 60 frames!</h1>
      </Sequence>
    </AbsoluteFill>
  );
};

绝对定位的元素在树中的位置越低，它在图层堆栈中的位置就越高。
如果您了解这种行为，您可以利用它，并在大多数情况下避免使用 z-index。

参见​

参见