как создать абсолютный элемент внутри абсолютного контейнера с переполнением: скрыто, не обрезается

Question

В классической модальной коробке у меня есть что-то вроде этого:

<div id="container">

    <div id="content"></div>

    <div id="closeButton"></div>

</div>

с этим стилем:

#container { position: absolute; overflow: hidden; }
#closeButton { position: absolute; top: -10px; right: -10px; }

но мой значок закрытия явно обрезан родителем из-за переполнения: скрытый, но я не могу установить переполнение: видимый, потому что на странице появляются полосы прокрутки.

Итак, есть ли способ сделать мою кнопку закрытия расположенной вне родительской, но не обрезанной?

Заранее большое спасибо, любая помощь будет оценена.

ПРИМЕЧАНИЕ: это нечто отличное от этого другого вопроса, потому что родительский элемент позиционируется абсолютно, а не относительно!

Answer 1

Да, но не так. Вам нужно поместить свой closeButton вне элемента div со свойством overflow, установленным в hidden:

<div id="container">
    <div id="content-container"><div id="content"></div></div>
    <div id="closeButton"></div>
</div>

И стиль:

#container { position: relative; /* or absolute */ overflow: visible; }
#content-container { overflow: hidden; }
#closeButton { position: absolute; top: -10px; right: -10px; }