diff --git a/packages/vkui/src/components/Image/Image.tsx b/packages/vkui/src/components/Image/Image.tsx
index 16ac757225..a69a6f3ef0 100644
--- a/packages/vkui/src/components/Image/Image.tsx
+++ b/packages/vkui/src/components/Image/Image.tsx
@@ -106,6 +106,7 @@ const getBorderRadiusBySizeInPx = (
 export const Image: React.FC<ImageProps> & {
   Badge: typeof ImageBadge;
   Overlay: typeof ImageBase.Overlay;
+  FloatElement: typeof ImageBase.FloatElement;
 } = ({
   size = IMAGE_DEFAULT_SIZE,
   borderRadius = 'm',
@@ -173,3 +174,6 @@ Image.Badge.displayName = 'Image.Badge';
 
 Image.Overlay = ImageBase.Overlay;
 Image.Overlay.displayName = 'Image.Overlay';
+
+Image.FloatElement = ImageBase.FloatElement;
+Image.FloatElement.displayName = 'Image.FloatElement';
diff --git a/packages/vkui/src/components/Image/Readme.md b/packages/vkui/src/components/Image/Readme.md
index a532a70c5b..3ff2576508 100644
--- a/packages/vkui/src/components/Image/Readme.md
+++ b/packages/vkui/src/components/Image/Readme.md
@@ -79,6 +79,52 @@ const OthersFeatures = () => {
   );
 };
 
+const WithFloatElements = () => {
+  const [showContextMenu, setShowContextMenu] = useState(true);
+  const [contextMenuOpened, setContextMenuOpened] = useState(false);
+  const [contextMenuVisibility, setContextMenuVisibility] = useState('on-hover');
+
+  return (
+    <Group header={<Header mode="secondary">C позиционированными компонентами</Header>}>
+      <FormLayoutGroup mode="horizontal">
+        <FormItem top="Контекстное меню">
+          <Checkbox
+            checked={showContextMenu}
+            onChange={(e) => setShowContextMenu(e.target.checked)}
+          >
+            Показать контекстное меню
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Контекстное меню">
+          <Select
+            options={[
+              { label: 'Всегда', value: 'always' },
+              { label: 'При наведении на картинку', value: 'on-hover' },
+            ]}
+            value={contextMenuVisibility}
+            disabled={!showContextMenu}
+            onChange={(e) => setContextMenuVisibility(e.target.value)}
+          />
+        </FormItem>
+      </FormLayoutGroup>
+      <Flex margin="auto" gap={'m'}>
+        <Image size={96} src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн">
+          {showContextMenu && (
+            <Image.FloatElement
+              position="top-end"
+              inlineIndent="l"
+              blockIndent="l"
+              visibility={contextMenuOpened ? 'always' : contextMenuVisibility}
+            >
+              <ContextMenu onShownChange={setContextMenuOpened} />
+            </Image.FloatElement>
+          )}
+        </Image>
+      </Flex>
+    </Group>
+  );
+};
+
 const Example = () => {
   return (
     <View activePanel="avatar">
@@ -87,6 +133,8 @@ const Example = () => {
         <Default />
         <Responsive />
         <OthersFeatures />
+
+        <WithFloatElements />
       </Panel>
     </View>
   );
@@ -205,5 +253,39 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange }
   );
 };
 
+const ContextMenu = ({ onShownChange }) => {
+  return (
+    <Popover
+      noStyling
+      trigger="click"
+      role="dialog"
+      onShownChange={onShownChange}
+      content={({ onClose }) => (
+        <div
+          style={{
+            backgroundColor: 'var(--vkui--color_background_modal_inverse)',
+            borderRadius: 8,
+            boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)',
+          }}
+        >
+          <CellButton role="menuitem" before={<Icon28AddOutline />} onClick={onClose}>
+            Добавить
+          </CellButton>
+          <CellButton
+            role="menuitem"
+            before={<Icon28DeleteOutline />}
+            mode="danger"
+            onClick={onClose}
+          >
+            Удалить
+          </CellButton>
+        </div>
+      )}
+    >
+      <Button mode="primary" after={<Icon16MoreHorizontal />}></Button>
+    </Popover>
+  );
+};
+
 <Example />;
 ```
diff --git a/packages/vkui/src/components/ImageBase/ImageBase.tsx b/packages/vkui/src/components/ImageBase/ImageBase.tsx
index 3ea5ebac70..c7d8208b75 100644
--- a/packages/vkui/src/components/ImageBase/ImageBase.tsx
+++ b/packages/vkui/src/components/ImageBase/ImageBase.tsx
@@ -8,6 +8,13 @@ import { getFetchPriorityProp } from '../../lib/utils';
 import type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';
 import { Clickable } from '../Clickable/Clickable';
 import { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
+import {
+  type FloatElementIndentation,
+  type FloatElementPlacement,
+  type FloatElementPosition,
+  ImageBaseFloatElement,
+  type ImageBaseFloatElementProps,
+} from './ImageBaseFloatElement/ImageBaseFloatElement';
 import { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
 import { ImageBaseContext } from './context';
 import type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';
@@ -20,6 +27,10 @@ export type {
   ImageBaseBadgeProps,
   ImageBaseOverlayProps,
   ImageBaseContextProps,
+  ImageBaseFloatElementProps,
+  FloatElementPlacement,
+  FloatElementPosition,
+  FloatElementIndentation,
 };
 
 export {
@@ -125,6 +136,7 @@ const sizeToNumber = (size: number | string | undefined): number | undefined =>
 export const ImageBase: React.FC<ImageBaseProps> & {
   Badge: typeof ImageBaseBadge;
   Overlay: typeof ImageBaseOverlay;
+  FloatElement: typeof ImageBaseFloatElement;
 } = ({
   alt,
   crossOrigin,
@@ -151,9 +163,11 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   withTransparentBackground,
   objectFit = 'cover',
   keepAspectRatio = false,
+  getRootRef,
   ...restProps
 }: ImageBaseProps) => {
   const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);
+  const wrapperRef = useExternRef(getRootRef);
 
   const width = widthSize ?? (keepAspectRatio ? undefined : size);
   const height = heightSize ?? (keepAspectRatio ? undefined : size);
@@ -207,7 +221,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   );
 
   return (
-    <ImageBaseContext.Provider value={{ size }}>
+    <ImageBaseContext.Provider value={{ size, ref: wrapperRef }}>
       <Clickable
         style={{ width, height, ...style }}
         baseClassName={classNames(
@@ -215,6 +229,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
           loaded && styles.loaded,
           withTransparentBackground && styles.transparentBackground,
         )}
+        getRootRef={wrapperRef}
         {...restProps}
       >
         {hasSrc && (
@@ -264,3 +279,6 @@ ImageBase.Badge.displayName = 'ImageBase.Badge';
 
 ImageBase.Overlay = ImageBaseOverlay;
 ImageBase.Overlay.displayName = 'ImageBase.Overlay';
+
+ImageBase.FloatElement = ImageBaseFloatElement;
+ImageBase.FloatElement.displayName = 'ImageBase.FloatElement';
diff --git a/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css
new file mode 100644
index 0000000000..4a937ca00d
--- /dev/null
+++ b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css
@@ -0,0 +1,138 @@
+.FloatElement {
+  position: absolute;
+  z-index: var(--vkui_internal--z_index_image_base_positioned_element);
+  transition: opacity 0.3s ease-in-out;
+  inset-inline-start: var(--vkui_internal--FloatElement_inset_inline_start, initial);
+  inset-inline-end: var(--vkui_internal--FloatElement_inset_inline_end, initial);
+  inset-block-start: var(--vkui_internal--FloatElement_inset_block_start, initial);
+  inset-block-end: var(--vkui_internal--FloatElement_inset_block_end, initial);
+
+  --vkui_internal--FloatElement_horizontal_indent: 0;
+  --vkui_internal--FloatElement_vertical_indent: 0;
+}
+
+.FloatElement--inlineIndent-2xs {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_2xs);
+}
+
+.FloatElement--inlineIndent-xs {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_xs);
+}
+
+.FloatElement--inlineIndent-s {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_s);
+}
+
+.FloatElement--inlineIndent-m {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_m);
+}
+
+.FloatElement--inlineIndent-l {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_l);
+}
+
+.FloatElement--inlineIndent-xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_xl);
+}
+
+.FloatElement--inlineIndent-2xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_2xl);
+}
+
+.FloatElement--inlineIndent-3xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_3xl);
+}
+
+.FloatElement--inlineIndent-4xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_4xl);
+}
+
+.FloatElement--blockIndent-2xs {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_2xs);
+}
+
+.FloatElement--blockIndent-xs {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_xs);
+}
+
+.FloatElement--blockIndent-s {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_s);
+}
+
+.FloatElement--blockIndent-m {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_m);
+}
+
+.FloatElement--blockIndent-l {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_l);
+}
+
+.FloatElement--blockIndent-xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_xl);
+}
+
+.FloatElement--blockIndent-2xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_2xl);
+}
+
+.FloatElement--blockIndent-3xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_3xl);
+}
+
+.FloatElement--blockIndent-4xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_4xl);
+}
+
+.FloatElement--hidden {
+  opacity: 0;
+}
+
+.FloatElement--position-topStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.FloatElement--position-top {
+  inset-inline-start: 50%;
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+  transform: translateX(-50%);
+}
+
+.FloatElement--position-topEnd {
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.FloatElement--position-bottomStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.FloatElement--position-bottom {
+  inset-inline-start: 50%;
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  transform: translateX(-50%);
+}
+
+.FloatElement--position-bottomEnd {
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+}
+
+.FloatElement--position-middleStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
+
+.FloatElement--position-middle {
+  inset-inline-start: 50%;
+  inset-block-start: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.FloatElement--position-middleEnd {
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
diff --git a/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.stories.tsx b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.stories.tsx
new file mode 100644
index 0000000000..a7cce7fea4
--- /dev/null
+++ b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.stories.tsx
@@ -0,0 +1,69 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Icon16MoreHorizontal, Icon28AddOutline, Icon28DeleteOutline } from '@vkontakte/icons';
+import { CanvasFullLayout, DisableCartesianParam } from '../../../storybook/constants';
+import { getAvatarUrl } from '../../../testing/mock';
+import { Button } from '../../Button/Button';
+import { CellButton } from '../../CellButton/CellButton';
+import { Popover } from '../../Popover/Popover';
+import { ImageBase } from '../ImageBase';
+import { ImageBaseFloatElement, type ImageBaseFloatElementProps } from './ImageBaseFloatElement';
+
+const ContextMenu = () => {
+  return (
+    <Popover
+      noStyling
+      trigger="click"
+      role="dialog"
+      content={({ onClose }) => (
+        <div
+          style={{
+            backgroundColor: 'var(--vkui--color_background_modal_inverse)',
+            borderRadius: 8,
+            boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)',
+          }}
+        >
+          <CellButton role="menuitem" before={<Icon28AddOutline />} onClick={onClose}>
+            Добавить
+          </CellButton>
+          <CellButton
+            role="menuitem"
+            before={<Icon28DeleteOutline />}
+            mode="danger"
+            onClick={onClose}
+          >
+            Удалить
+          </CellButton>
+        </div>
+      )}
+    >
+      <Button mode="primary" after={<Icon16MoreHorizontal />}></Button>
+    </Popover>
+  );
+};
+
+const story: Meta<ImageBaseFloatElementProps> = {
+  title: 'Blocks/ImageBaseFloatElement',
+  component: ImageBaseFloatElement,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  decorators: [
+    (Component) => (
+      <ImageBase size={96} src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн">
+        <Component />
+      </ImageBase>
+    ),
+  ],
+};
+
+export default story;
+
+type Story = StoryObj<ImageBaseFloatElementProps>;
+
+export const Playground: Story = {
+  args: {
+    position: {
+      insetInlineEnd: '5%',
+      insetBlockStart: '5%',
+    },
+    children: <ContextMenu />,
+  },
+};
diff --git a/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.test.tsx b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.test.tsx
new file mode 100644
index 0000000000..940958ab00
--- /dev/null
+++ b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.test.tsx
@@ -0,0 +1,203 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { baselineComponent } from '../../../testing/utils';
+import { Image } from '../../Image/Image';
+import {
+  type FloatElementIndentation,
+  type FloatElementPlacement,
+  ImageBaseFloatElement,
+} from './ImageBaseFloatElement';
+import styles from './ImageBaseFloatElement.module.css';
+
+describe(ImageBaseFloatElement, () => {
+  baselineComponent(ImageBaseFloatElement);
+
+  it('check component position', () => {
+    render(
+      <ImageBaseFloatElement
+        data-testid="component"
+        position={{
+          insetBlockStart: '10px',
+          insetBlockEnd: '10px',
+          insetInlineEnd: '20px',
+          insetInlineStart: '20px',
+        }}
+      />,
+    );
+
+    expect(screen.getByTestId('component')).not.toHaveClass(styles['FloatElement--hidden']);
+
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--FloatElement_inset_block_start'),
+    ).toBe('10px');
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--FloatElement_inset_block_end'),
+    ).toBe('10px');
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--FloatElement_inset_inline_start'),
+    ).toBe('20px');
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--FloatElement_inset_inline_end'),
+    ).toBe('20px');
+  });
+
+  it('check visibility on image hover', async () => {
+    render(
+      <>
+        <Image size={96} src="test" alt="Приложение шторм онлайн" data-testid="image">
+          <ImageBaseFloatElement
+            data-testid="component"
+            visibility="on-hover"
+            position={{
+              insetBlockStart: '10px',
+              insetBlockEnd: '10px',
+              insetInlineEnd: '20px',
+              insetInlineStart: '20px',
+            }}
+          />
+        </Image>
+      </>,
+    );
+
+    expect(screen.getByTestId('component')).toHaveClass(styles['FloatElement--hidden']);
+
+    fireEvent(
+      screen.getByTestId('image'),
+      new MouseEvent('mouseover', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(screen.getByTestId('component')).not.toHaveClass(styles['FloatElement--hidden']);
+
+    fireEvent(
+      screen.getByTestId('image'),
+      new MouseEvent('mouseout', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(screen.getByTestId('component')).toHaveClass(styles['FloatElement--hidden']);
+  });
+
+  const placementFixtures = Object.entries({
+    'top-start': styles['FloatElement--position-topStart'],
+    'top': styles['FloatElement--position-top'],
+    'top-end': styles['FloatElement--position-topEnd'],
+    'bottom-start': styles['FloatElement--position-bottomStart'],
+    'bottom': styles['FloatElement--position-bottom'],
+    'bottom-end': styles['FloatElement--position-bottomEnd'],
+    'middle-start': styles['FloatElement--position-middleStart'],
+    'middle': styles['FloatElement--position-middle'],
+    'middle-end': styles['FloatElement--position-middleEnd'],
+  }).map(([placement, className]) => ({
+    placement: placement as FloatElementPlacement,
+    className,
+  }));
+
+  it.each(placementFixtures)('should have placement className %j', ({ placement, className }) => {
+    render(<ImageBaseFloatElement data-testid="component" position={placement} />);
+    expect(screen.getByTestId('component')).toHaveClass(className);
+  });
+
+  const horizontalIndentationFixtures = Object.entries({
+    '2xs': styles['FloatElement--inlineIndent-2xs'],
+    'xs': styles['FloatElement--inlineIndent-xs'],
+    's': styles['FloatElement--inlineIndent-s'],
+    'm': styles['FloatElement--inlineIndent-m'],
+    'l': styles['FloatElement--inlineIndent-l'],
+    'xl': styles['FloatElement--inlineIndent-xl'],
+    '2xl': styles['FloatElement--inlineIndent-2xl'],
+    '3xl': styles['FloatElement--inlineIndent-3xl'],
+    '4xl': styles['FloatElement--inlineIndent-4xl'],
+  }).map(([indent, className]) => ({
+    indent: indent as Exclude<FloatElementIndentation, string | number>,
+    className,
+  }));
+
+  it.each(horizontalIndentationFixtures)(
+    'should have horizontal indentation className %j',
+    ({ indent, className }) => {
+      render(
+        <ImageBaseFloatElement data-testid="component" position="top" inlineIndent={indent} />,
+      );
+      expect(screen.getByTestId('component')).toHaveClass(className);
+    },
+  );
+
+  const verticalIndentationFixtures = Object.entries({
+    '2xs': styles['FloatElement--blockIndent-2xs'],
+    'xs': styles['FloatElement--blockIndent-xs'],
+    's': styles['FloatElement--blockIndent-s'],
+    'm': styles['FloatElement--blockIndent-m'],
+    'l': styles['FloatElement--blockIndent-l'],
+    'xl': styles['FloatElement--blockIndent-xl'],
+    '2xl': styles['FloatElement--blockIndent-2xl'],
+    '3xl': styles['FloatElement--blockIndent-3xl'],
+    '4xl': styles['FloatElement--blockIndent-4xl'],
+  }).map(([indent, className]) => ({
+    indent: indent as Exclude<FloatElementIndentation, string | number>,
+    className,
+  }));
+
+  it.each(verticalIndentationFixtures)(
+    'should have vertical indentation className %j',
+    ({ indent, className }) => {
+      render(<ImageBaseFloatElement data-testid="component" position="top" blockIndent={indent} />);
+      expect(screen.getByTestId('component')).toHaveClass(className);
+    },
+  );
+
+  it('check number indentation', () => {
+    render(
+      <ImageBaseFloatElement
+        data-testid="component"
+        position="top"
+        blockIndent={10}
+        inlineIndent={15}
+      />,
+    );
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--FloatElement_horizontal_indent'),
+    ).toBe('15px');
+
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--FloatElement_vertical_indent'),
+    ).toBe('10px');
+  });
+
+  it('check string indentation', () => {
+    render(
+      <ImageBaseFloatElement
+        data-testid="component"
+        position="top"
+        blockIndent="5%"
+        inlineIndent="10%"
+      />,
+    );
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--FloatElement_horizontal_indent'),
+    ).toBe('10%');
+
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--FloatElement_vertical_indent'),
+    ).toBe('5%');
+  });
+});
diff --git a/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx
new file mode 100644
index 0000000000..0334ab90d0
--- /dev/null
+++ b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx
@@ -0,0 +1,188 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
+import { type HTMLAttributesWithRootRef } from '../../../types';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import { ImageBaseContext } from '../context';
+import { resolveIndent } from './helpers';
+import styles from './ImageBaseFloatElement.module.css';
+
+export type FloatElementPlacement =
+  | 'top-start'
+  | 'top'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom'
+  | 'bottom-end'
+  | 'middle-start'
+  | 'middle'
+  | 'middle-end';
+
+export type FloatElementPosition = {
+  insetInlineStart?: React.CSSProperties['insetInlineStart'];
+  insetInlineEnd?: React.CSSProperties['insetInlineEnd'];
+  insetBlockStart?: React.CSSProperties['insetBlockStart'];
+  insetBlockEnd?: React.CSSProperties['insetBlockEnd'];
+};
+
+export type FloatElementIndentation =
+  | '2xs'
+  | 'xs'
+  | 's'
+  | 'm'
+  | 'l'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | number
+  | string;
+
+const positionPlacementClassNames = {
+  'top-start': styles['FloatElement--position-topStart'],
+  'top': styles['FloatElement--position-top'],
+  'top-end': styles['FloatElement--position-topEnd'],
+  'bottom-start': styles['FloatElement--position-bottomStart'],
+  'bottom': styles['FloatElement--position-bottom'],
+  'bottom-end': styles['FloatElement--position-bottomEnd'],
+  'middle-start': styles['FloatElement--position-middleStart'],
+  'middle': styles['FloatElement--position-middle'],
+  'middle-end': styles['FloatElement--position-middleEnd'],
+};
+
+const inlineIndentClassNames = {
+  '2xs': styles['FloatElement--inlineIndent-2xs'],
+  'xs': styles['FloatElement--inlineIndent-xs'],
+  's': styles['FloatElement--inlineIndent-s'],
+  'm': styles['FloatElement--inlineIndent-m'],
+  'l': styles['FloatElement--inlineIndent-l'],
+  'xl': styles['FloatElement--inlineIndent-xl'],
+  '2xl': styles['FloatElement--inlineIndent-2xl'],
+  '3xl': styles['FloatElement--inlineIndent-3xl'],
+  '4xl': styles['FloatElement--inlineIndent-4xl'],
+};
+
+const blockIndentClassNames = {
+  '2xs': styles['FloatElement--blockIndent-2xs'],
+  'xs': styles['FloatElement--blockIndent-xs'],
+  's': styles['FloatElement--blockIndent-s'],
+  'm': styles['FloatElement--blockIndent-m'],
+  'l': styles['FloatElement--blockIndent-l'],
+  'xl': styles['FloatElement--blockIndent-xl'],
+  '2xl': styles['FloatElement--blockIndent-2xl'],
+  '3xl': styles['FloatElement--blockIndent-3xl'],
+  '4xl': styles['FloatElement--blockIndent-4xl'],
+};
+
+export interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Позиция компонента относительно родителя
+   */
+  position: FloatElementPlacement | FloatElementPosition;
+  /**
+   * Отступ компонента от края контейнера по горизонтали
+   */
+  inlineIndent?: FloatElementIndentation;
+  /**
+   * Отступ компонента от края контейнера по вертикали
+   */
+  blockIndent?: FloatElementIndentation;
+  /**
+   * Режим отображения компонента:
+   *
+   * - `"always"`: Всегда
+   * - `"on-hover"`: При наведении на картинку
+   */
+  visibility?: 'always' | 'on-hover';
+}
+
+export const ImageBaseFloatElement = ({
+  position,
+  visibility = 'always',
+  style,
+  className,
+  inlineIndent,
+  blockIndent,
+  ...restProps
+}: ImageBaseFloatElementProps) => {
+  const [hidden, setHidden] = React.useState(visibility !== 'always');
+  const { ref: imageWrapperRef } = React.useContext(ImageBaseContext);
+
+  useIsomorphicLayoutEffect(
+    function resetHidden() {
+      setHidden(visibility === 'on-hover');
+    },
+    [visibility],
+  );
+
+  React.useEffect(
+    function updateHiddenSubscribe() {
+      const wrapper = imageWrapperRef.current;
+      if (wrapper && visibility === 'on-hover') {
+        const onMouseOver = () => setHidden(false);
+        const onMouseOut = () => setHidden(true);
+
+        wrapper.addEventListener('mouseover', onMouseOver);
+        wrapper.addEventListener('mouseout', onMouseOut);
+
+        return () => {
+          wrapper.removeEventListener('mouseover', onMouseOver);
+          wrapper.removeEventListener('mouseout', onMouseOut);
+        };
+      }
+      return;
+    },
+    [visibility, imageWrapperRef],
+  );
+
+  const positionStyle = React.useMemo(
+    () =>
+      typeof position === 'object'
+        ? {
+            '--vkui_internal--FloatElement_inset_inline_start': position.insetInlineStart,
+            '--vkui_internal--FloatElement_inset_inline_end': position.insetInlineEnd,
+            '--vkui_internal--FloatElement_inset_block_start': position.insetBlockStart,
+            '--vkui_internal--FloatElement_inset_block_end': position.insetBlockEnd,
+          }
+        : {},
+    [position],
+  );
+
+  const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =
+    React.useMemo(() => {
+      const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(
+        inlineIndent,
+        '--vkui_internal--FloatElement_horizontal_indent',
+        inlineIndentClassNames,
+      );
+      const [blockIndentStyle, blockIndentClassName] = resolveIndent(
+        blockIndent,
+        '--vkui_internal--FloatElement_vertical_indent',
+        blockIndentClassNames,
+      );
+
+      return [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName];
+    }, [inlineIndent, blockIndent]);
+
+  return (
+    <RootComponent
+      {...restProps}
+      style={{
+        ...style,
+        ...positionStyle,
+        ...inlineIndentStyle,
+        ...blockIndentStyle,
+      }}
+      className={classNames(
+        styles['FloatElement'],
+        hidden && styles['FloatElement--hidden'],
+        typeof position === 'string' && positionPlacementClassNames[position],
+        inlineIndentClassName,
+        blockIndentClassName,
+        className,
+      )}
+    />
+  );
+};
+
+ImageBaseFloatElement.displayName = 'ImageBaseFloatElement';
diff --git a/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/helpers.ts b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/helpers.ts
new file mode 100644
index 0000000000..c93ee3f0db
--- /dev/null
+++ b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/helpers.ts
@@ -0,0 +1,40 @@
+import { type FloatElementIndentation } from './ImageBaseFloatElement';
+
+function isIndentSizeConstant(indent: FloatElementIndentation) {
+  return (
+    indent === '2xs' ||
+    indent === 'xs' ||
+    indent === 's' ||
+    indent === 'm' ||
+    indent === 'l' ||
+    indent === 'xl' ||
+    indent === '2xl' ||
+    indent === '3xl' ||
+    indent === '4xl'
+  );
+}
+
+function calculateIndent(indent: FloatElementIndentation) {
+  if (isIndentSizeConstant(indent)) {
+    return;
+  }
+  return typeof indent === 'string' ? indent : `${indent}px`;
+}
+
+export const resolveIndent = (
+  indent: FloatElementIndentation | undefined,
+  cssProperty: string,
+  classNames: Record<string, string>,
+): [React.CSSProperties | undefined, string | undefined] => {
+  if (!indent) {
+    return [undefined, undefined];
+  }
+
+  const calculatedIndent = calculateIndent(indent);
+
+  if (calculatedIndent) {
+    return [{ [cssProperty]: calculatedIndent }, undefined];
+  }
+
+  return [undefined, classNames[indent]];
+};
diff --git a/packages/vkui/src/components/ImageBase/context.ts b/packages/vkui/src/components/ImageBase/context.ts
index b8be8e5956..653236a00c 100644
--- a/packages/vkui/src/components/ImageBase/context.ts
+++ b/packages/vkui/src/components/ImageBase/context.ts
@@ -4,4 +4,7 @@ import type { ImageBaseContextProps } from './types';
 export const ImageBaseContext: React.Context<ImageBaseContextProps> =
   React.createContext<ImageBaseContextProps>({
     size: 0,
+    ref: {
+      current: null,
+    },
   });
diff --git a/packages/vkui/src/components/ImageBase/types.ts b/packages/vkui/src/components/ImageBase/types.ts
index 32d77d0a50..828f8eaccc 100644
--- a/packages/vkui/src/components/ImageBase/types.ts
+++ b/packages/vkui/src/components/ImageBase/types.ts
@@ -10,4 +10,5 @@ export type ImageBaseExpectedIconProps = {
 
 export interface ImageBaseContextProps {
   size: ImageBaseSize | number;
+  ref: React.RefObject<HTMLElement | null>;
 }
diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts
index 43a7c9d059..bf4d9932f0 100644
--- a/packages/vkui/src/index.ts
+++ b/packages/vkui/src/index.ts
@@ -59,6 +59,10 @@ export type {
   ImageBaseExpectedIconProps,
   ImageBaseBadgeProps,
   ImageBaseOverlayProps,
+  ImageBaseFloatElementProps,
+  FloatElementPlacement,
+  FloatElementPosition,
+  FloatElementIndentation,
 } from './components/ImageBase/ImageBase';
 
 /**
diff --git a/packages/vkui/src/styles/constants.css b/packages/vkui/src/styles/constants.css
index aa9260edd9..d96686b083 100644
--- a/packages/vkui/src/styles/constants.css
+++ b/packages/vkui/src/styles/constants.css
@@ -75,6 +75,7 @@
   --vkui_internal--z_index_image_base_overlay: 0;
   --vkui_internal--z_index_image_base_border: 1;
   --vkui_internal--z_index_image_base_badge: 2;
+  --vkui_internal--z_index_image_base_positioned_element: 3;
 
   /* z_index HorizontalScroll isolate */
   --vkui_internal--z_index_horizontal_scroll_arrow: 1;