Как сдвинуть блок за границу родительского блока, что бы он был сверху?

Question

[Cheizer]

Друзья, не могу решить простую задачу :( есть родительский блок в PSITION: RELATIVE и OVERFLOW:HIDDEN; Убрать я эти два свойства не могу. И внутри есть дочерний блок в POSITION: ABSOLUTE; BOTTOM:-100px; вот как его сдвинуть за границу родительского блока? Что бы он был виден ПОЛНОСТЬЮ? Сейчас у меня он прячется за родительским, все что выходит за края родительского невидно, а надо что бы было видно, но overflow:hidden у родителя убрать нельзя. Как такое делают?

Answer 1

[Юпитер Макс]

вам нужно родительский блок завернуть еще в один, и блок с абсолютной позицией поставить именно в нового родителя. Тогда у вас сохранится свойство hidden

<div class="parent1"> <!-- тут поставьте position:relative; -->
    <div class="children-absolute">А этот блок будет абсолютный. Так как он выше, он будет перекрывать children-hidden</div>
    <div class="children-hidden">Вот тут сохранится overflow:hidden;</div>
</div>

Comments

[Cheizer]

Спасибо! Все так и делал, но все равно не получалось, оказалось по умолчанию у родителя стояло помимо position:relative; еще и z-index:0; и при таком индексе внутренний блок абсолютный даже с index:999 все равно прятался за края, поставил родителю z-index:auto; и порядок :)

[Юпитер Макс]

Да, верно. Про z-index я забыл вам написать :)

Answer 2

[AngReload]

Ещё дикий вариант, сделать ему position: fixed и с помощью js динамически рассчитывать top и left имитируя поведение position: absolute.