<AbsoluteFill>

一个辅助组件 - 它是一个绝对定位的 <div>，具有以下样式：

🌐 A helper component - it is an absolutely positioned <div> with the following styles:

Styles of AbsoluteFill
const style: React.CSSProperties = {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  width: '100%',
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
};

这个组件对于将内容层叠在一起非常有用。例如，你可以用它来创建全屏视频背景：

🌐 This component is useful for layering content on top of each other. For example, you can use it to create a full-screen video background:

Layer example
import {AbsoluteFill, OffthreadVideo} from 'remotion';

const MyComp = () => {
  return (
    <AbsoluteFill>
      <AbsoluteFill>
        <OffthreadVideo src="https://example.com/video.mp4" />
      </AbsoluteFill>
      <AbsoluteFill>
        <h1>This text is written on top!</h1>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

最后渲染的层显示在最上面——这是因为 HTML 的工作方式。

🌐 The layers that get rendered last appear on top - this is because of how HTML works.

添加引用

🌐 Adding a ref

从 v3.2.13 版本开始，你可以向 <AbsoluteFill> 添加一个 React ref。如果你使用 TypeScript，你需要用 HTMLDivElement 来类型化它：

🌐 You can add a React ref to an <AbsoluteFill> from version v3.2.13 on. If you use TypeScript, you need to type it with HTMLDivElement:

const MyComp = () => {
  const ref = useRef<HTMLDivElement>(null);
  return <AbsoluteFill ref={ref}>{content}</AbsoluteFill>;
};

TailwindCSS 类检测v4.0.249

🌐 TailwindCSS class detectionv4.0.249

这个组件有一个 style 对象，它比 className 的重要性更高。

🌐 This component has a style object, which has higher importance than className's.

为了让它像你期望的那样表现（行布局）：

🌐 In order to make this behave like you expect (row layout):

<AbsoluteFill className="flex flex-row" />

我们会检测冲突的 Tailwind 类，并在 Remotion v4.0.249 及以上版本中禁用相应的内联样式。
请查看下面的源代码，了解我们是如何检测 Tailwind 类的。

🌐 We detect conflicting Tailwind classes and disable the corresponding inline styles if they are present from Remotion v4.0.249.
Review the source code below to see how we detect Tailwind classes.

兼容性

🌐 Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio

另请参阅

🌐 See also

• 此组件的源代码