Сделать родительский див. ⇐ Html

[Anonymous]

Я хочу создать компонент, который принимает 4 реквизита: ширина, высота, сверху и слева. позиционированный абсолют, я просто хочу нарисовать div с этими реквизитами.
Тогда мне нужно расширить каждую сторону на 12px, поэтому для этого я использую Box-Shadow: 0 0 0 12px ; (и не наброски: , потому что он делал небольшие пробелы между фактическим дивизоном и наброском по какой-то и явной, тогда я использую границу radius, тогда как ... p> p> p> p> p> p> p> p> prue/p> p> p> pline p> p> pline. Кнопка, которая будет плавать за пределами этого дивизиона. Это выглядит так:

Мы получили как опоры: ширина: 500, высота: 300, вверх и положил кнопку внутри этого div и переведет ее вне его < /p>
interface AppProps {
width: number;
height: number;
top: number;
left: number;
}

function App({ width, height, top, left }: AppProps) {
return (





);
}
< /code>
.marker {
box-shadow: 0 0 0 12px red;
border-radius: 8px;
}

.marker-button {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
transform: translate(-46px, 0);
}

.marker-wrapper {
display: inline-block;
}
< /code>
Но потом мне трудно добавить поведение падения, я хочу, чтобы весь компонент был показан только тогда, когда пользователь колеблется на красной части, и когда он его будет зависать, он также сможет выйти из нее, и нажимает на кнопку ... но, поскольку эффект падения находится только на «красной части», когда он выходит из меня, и кнопку, которая также разочаровывает кнопку. Вонючий -это тот факт, что я переводил его на определенную сумму магического числа, которую мне не нравится, и я не знаю, как это сделать, используя гибкость. В основном я перевел его на 46px, потому что: -24px слева, потому что это размер кнопки, затем -12px, чтобы избежать обострения коробки «падки», и -10px между маркированной областью и кнопкой =>> -4-10-10 й -4 -a. По какой -то причине ... есть лучший способ?
Любая помощь будет оценена!

Подробнее здесь: https://stackoverflow.com/questions/796 ... s-children