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

Float 컴포넌트는 부모 안의 특정 위치에 요소를 배치할 때 사용합니다.

사용 가능 버전: @seed-design/lynx-react@1.2.0, @seed-design/lynx-css@1.2.0

## Preview

```tsx
import { Box, Float, ContextualFloatingButton } from "@seed-design/lynx-react";

export default function FloatPreview() {
  return (
    <Box
      position="relative"
      width="full"
      maxWidth="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>
  );
}
```

## Installation

- npm: npm install @seed-design/lynx-react @seed-design/lynx-css
- pnpm: pnpm add @seed-design/lynx-react @seed-design/lynx-css
- yarn: yarn add @seed-design/lynx-react @seed-design/lynx-css
- bun: bun add @seed-design/lynx-react @seed-design/lynx-css

## Usage

```tsx
import { Float, Text } from "@seed-design/lynx-react";

<view style={{ position: "relative", width: "200px", height: "120px" }}>
  <Float placement="top-end" offsetX="x3" offsetY="x3" zIndex={1}>
    <Text>새 소식</Text>
  </Float>
</view>
```

`Float`는 `position: relative`인 부모를 기준으로 요소를 절대 배치합니다. `placement`는 세로 `top`·`middle`·`bottom`과 가로 `start`·`center`·`end`를 조합한 9개 값을 받습니다.

`offsetX`와 `offsetY`의 기본값은 `0`입니다. SEED dimension 토큰이나 `"12px"`, `"-8px"` 같은 길이를 지정할 수 있습니다.

## Props

## Examples

### Offset X

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

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

```tsx
import { Box, Float, ContextualFloatingButton } from "@seed-design/lynx-react";

export default function FloatOffsetX() {
  return (
    <Box
      position="relative"
      width="full"
      maxWidth="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, ContextualFloatingButton } from "@seed-design/lynx-react";

export default function FloatOffsetY() {
  return (
    <Box
      position="relative"
      width="full"
      maxWidth="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>
  );
}
```

## ImageFrameFloater와의 관계

이미지 안에 배지나 버튼을 배치할 때는 [ImageFrameFloater](/lynx/components/image-frame#overlay)를 사용하세요. `ImageFrameFloater`는 `Float`를 조합하며, 기존처럼 가장자리 축에는 `x1_5`, 중앙 축에는 `0`을 기본 간격으로 적용합니다. 이미지가 Safe Area로 확장되면 안전 영역에 맞춰 위치를 보정합니다.

일반 `Float`는 Safe Area를 자동 보정하지 않으며 `extendSafeAreaX` prop도 받지 않습니다. `ImageFrame` 안에서 사용해도 기본 offset은 `0`입니다. 화면 끝까지 확장하는 방법과 콘텐츠를 보호하는 기준은 [Safe Area 가이드](/lynx/getting-started/safe-area)를 참고하세요.

## 웹 버전과의 차이

- `as`를 지원하지 않으며 네이티브 `<view>`를 렌더링합니다.
- `onClick`·`aria-*` 대신 `bindtap`·`accessibility-*` 등 Lynx native 속성을 사용합니다.
- 부모 밖으로 배치한 요소가 잘리면 해당 부모와 조상의 `overflow`를 확인하고 필요한 곳에 `overflow: visible`을 지정하세요.