# Float
URL: /react/components/layout/float
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/(foundation)/layout/float.mdx

Float 컴포넌트는 특정 위치에 고정된 요소를 배치할 때 사용합니다.

## Preview

```tsx
import { Box, Float } from "@seed-design/react";
import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

export default function FloatPreview() {
  return (
    <Box
      position="relative"
      width="480px"
      height="480px"
      borderWidth={1}
      borderColor="stroke.neutralMuted"
    >
      <Float placement="top-start">
        <ContextualFloatingButton>Top Start</ContextualFloatingButton>
      </Float>
      <Float placement="top-center">
        <ContextualFloatingButton>Top Center</ContextualFloatingButton>
      </Float>
      <Float placement="top-end">
        <ContextualFloatingButton>Top End</ContextualFloatingButton>
      </Float>
      <Float placement="middle-start">
        <ContextualFloatingButton>Middle Start</ContextualFloatingButton>
      </Float>
      <Float placement="middle-center">
        <ContextualFloatingButton>Middle Center</ContextualFloatingButton>
      </Float>
      <Float placement="middle-end">
        <ContextualFloatingButton>Middle End</ContextualFloatingButton>
      </Float>
      <Float placement="bottom-start">
        <ContextualFloatingButton>Bottom Start</ContextualFloatingButton>
      </Float>
      <Float placement="bottom-center">
        <ContextualFloatingButton>Bottom Center</ContextualFloatingButton>
      </Float>
      <Float placement="bottom-end">
        <ContextualFloatingButton>Bottom End</ContextualFloatingButton>
      </Float>
    </Box>
  );
}
```

## Props

## Examples

### Offset X

`offsetX` 속성을 사용하면 좌우 방향으로 위치를 조정할 수 있습니다.

`start`, `middle`에서는 우측 방향으로 조정되고, `end`에서는 좌측 방향으로 조정됩니다.

```tsx
import { Box, Float } from "@seed-design/react";
import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

export default function FloatOffsetX() {
  return (
    <Box
      position="relative"
      width="480px"
      height="480px"
      borderWidth={1}
      borderColor="stroke.neutralMuted"
    >
      <Float placement="middle-start" offsetX="x4">
        <ContextualFloatingButton>Middle Start</ContextualFloatingButton>
      </Float>
      <Float placement="middle-center" offsetX="x4">
        <ContextualFloatingButton>Middle Center</ContextualFloatingButton>
      </Float>
      <Float placement="middle-end" offsetX="x4">
        <ContextualFloatingButton>Middle End</ContextualFloatingButton>
      </Float>
    </Box>
  );
}
```

### Offset Y

`offsetY` 속성을 사용하면 상하 방향으로 위치를 조정할 수 있습니다.

`top`, `middle`에서는 하측 방향으로 조정되고, `bottom`에서는 상측 방향으로 조정됩니다.

```tsx
import { Box, Float } from "@seed-design/react";
import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

export default function FloatOffsetY() {
  return (
    <Box
      position="relative"
      width="480px"
      height="480px"
      borderWidth={1}
      borderColor="stroke.neutralMuted"
    >
      <Float placement="top-center" offsetY="x4">
        <ContextualFloatingButton>Top Center</ContextualFloatingButton>
      </Float>
      <Float placement="middle-center" offsetY="x4">
        <ContextualFloatingButton>Middle Center</ContextualFloatingButton>
      </Float>
      <Float placement="bottom-center" offsetY="x4">
        <ContextualFloatingButton>Bottom Center</ContextualFloatingButton>
      </Float>
    </Box>
  );
}
```