图层

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

🌐 Unlike normal websites, a video has fixed dimensions. That means, it is okay to use position: "absolute"!

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

🌐 In Remotion, you often want to "layer" elements on top of each other.
This is a common pattern in video editors, and in Photoshop.

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

🌐 An easy way to do it is using the <AbsoluteFill> component:

MyComp.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>
  );
};

这将把文本呈现在图片的顶部。

🌐 This will render the text on top of the image.

如果你只想在特定时间段显示一个元素，你可以使用 <Sequence> 组件，该组件默认也是绝对定位的。

🌐 If you want to only show an element for a certain duration, you can use a <Sequence> component, which by default is also absolutely positioned.

MyComp.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。

🌐 The lower the absolutely positioned element is in the tree, the higher it will be in the layer stack.
If you are aware of this behavior, you can use it to your advantage and avoid using z-index in most cases.

另请参阅

🌐 See also

另请参阅​

另请参阅