Positioning
Control CSS position of the widget container — fixed, absolute, relative, static.
Position determines how the widget container is placed in the document — whether it floats over the viewport, sits inside a specific parent element, or flows with the rest of the content. It maps directly to the CSS position property and defaults to fixed.
Available values
| Value | Behavior |
|---|---|
fixed | Stays in place relative to the viewport during scroll (default) |
absolute | Positioned relative to the nearest positioned ancestor |
relative | Flows in the document, offsets from its normal position |
static | Normal document flow, no positioning |
Absolute
Positioned relative to the nearest positioned ancestor — useful for placing the widget inside a specific container:
import { useScena, ComponentPosition } from '@retoo/scena';
import '@retoo/scena/styles';
const scena = useScena();
await scena.mount({
video: { src: '/video.mp4' },
container: { position: ComponentPosition.ABSOLUTE },
});
Relative
Renders the widget inside the document flow — useful for embedding in content sections, cards, or demo areas:
import { useScena, ComponentPosition } from '@retoo/scena';
import '@retoo/scena/styles';
const scena = useScena();
await scena.mount({
video: { src: '/video.mp4' },
container: { position: ComponentPosition.RELATIVE },
});
Mount target
By default, Scena mounts to document.body. Pass a DOM element as the second argument to mount() to render inside a specific container:
import { useScena, ComponentPosition } from '@retoo/scena';
import '@retoo/scena/styles';
const scena = useScena();
const target = document.getElementById('widget-area');
await scena.mount(
{
video: { src: '/video.mp4' },
container: { position: ComponentPosition.RELATIVE },
},
target
);
Customization
For precise positioning beyond the defaults, use customStyles:
import { useScena, ComponentPosition } from '@retoo/scena';
import '@retoo/scena/styles';
const scena = useScena();
await scena.mount({
video: { src: '/video.mp4' },
container: {
position: ComponentPosition.FIXED,
customStyles: {
root: {
bottom: '24px',
right: '24px',
},
},
},
});