Родительский див, который включает в себя элемент, который переводится вне его [дублировать] ⇐ Html

[Anonymous]

Имея простой дифта в середине экрана, и внутри этого тега Div есть кнопка, эта кнопка переводится за пределами Div. Есть ли способ добавить Div с оберткой, который будет включать размеры как Div, так и кнопки, которая сейчас находится вне его? />
Независимо от того, где мы переводим кнопку на, что является динамическим, поэтому использование магических чисел здесь является недействительным, другой пример:
ways? чисто css/html?

Код: Выделить всё

import "./style.css";
import React, { useState } from "react";

type TranslateButton = {
x: number;
y: number;
};

interface AppProps {
translateButton: TranslateButton;
}

export default function App({ translateButton }: AppProps) {
const { x, y } = translateButton;
return (
{/* 
.red-box {
display: inline-block;
position: relative;
width: 500px;
height: 200px;
background-color: red;
top: 200px;
left: 200px;
}

.btn {
width: 24px;
aspect-ratio: 1;
}
< /code>
И он будет отображаться как таковой: < /p>
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(



);

Я попытался использовать свойство inline block , но безрезультатно, также очень сложно определить.


Подробнее здесь: https://stackoverflow.com/questions/796 ... side-of-it