Отображение полного элемента при overflow: hidden в CSS

Быстрый ответ

.parent {
  position: relative; /* Основной контейнер, ограничивающий своего потомка */
  overflow: hidden; /* Извините, потомок. Вам здесь не поместиться  */
}
.child {
  position: absolute; /* Потомок, стремящийся к свободе за пределы родителя */
  top: 50px;
  left: 50px; /* Ваши координаты, как точки на карте в поиске сокровищ */
}

Этот код иллюстрирует, что абсолютно позиционированный элемент может перемещаться свободно, но родитель с overflow: hidden и position: relative препятствует выходу его за свои границы, обрезая его при попытке переступить эти границы.

Метод «двойного дива»

Можно использовать дополнительный контейнер внутри родителя с overflow: hidden, который позволит дочернему элементу оставаться видимым, даже выходя за рамки родителя. Это можно сравнить с установкой защитного стекла, которое отводит дождь, но не скрывает видимость.

.parent {
  position: relative;
  overflow: hidden; /* Зонтик раскрыт */
}
.parent .wrapper {
  position: absolute; /* Потомку предоставлен домик для игр */
}
.parent .wrapper .child {
  position: absolute; /* Теперь потомок свободен в своих движениях */
  top: 50px;
  left: 50px;
}

«Третье измерение»

Используя z-index, можно надеть на абсолютно позиционированные дочерние элементы своего рода 'плащ невидимку', что позволит им оставаться на виду, но при этом быть над другими элементами.

Не забывайте о transform и offset

Важно помнить, что трансформации и изменение position родителя могут влиять на offsetParent и абсолютное позиционирование потомков.

Окликнуть на помощь JavaScript

Если проблема не решается с помощью CSS, на помощь приходит JavaScript. Метод getBoundingClientRect() JavaScript – ваш точный инструмент для определения положения дочернего элемента.

Выход за рамки с использованием тега body

Иногда можно обратиться к body для выхода за пределы родителя. Такой подход напоминает о переезде в комнату без стен (видимую область браузера), минуя ограничения со свойством overflow: hidden.

Визуализация

Пример работы overflow: hidden:

Видимость до обрезки (Overflow:visible):

🖼️ [🤾‍♀️🏷️🏞️🌲]    🏷️ (элемент виден за пределами контейнера)

Видимость после обрезки (Overflow:hidden):

🖼️ [🤾‍♀️🏞️🌲]       (элемент обрезан)

Что произошло? Дочерний элемент (div) был обрезан благодаря свойству overflow:hidden.

Небольшой трюк с псевдоэлементами

Псевдоэлементы (::before, ::after), будучи дочерними по отношению к родительскому блоку, могут оставаться видимыми, даже если для родителя установлено свойство overflow: hidden.

Добрая привычка сохранять чистоту макета

Добавление нового div с clear:both; после абсолютно позиционированного элемента помогает избегать нарушения целостности документа около родительского блока.

Примеры-друзья

Информация лучше всего усваивается на практических примерах. Ссылка jsfiddle позволяет увидеть все эти концепции в действии.

Полезные материалы

1. position – CSS: Каскадные таблицы стилей | MDN — подробное руководство по свойству position.
2. Абсолютное позиционирование внутри относительного | CSS-Tricks — практические примеры и объяснения.
3. Свойство CSS overflow — руководство по свойству overflow.
4. CSS для поддержания футера страницы внизу при минимальной высоте... | Stack Overflow — обсуждение overflow:hidden.
5. Подробное руководство по свойству z-index в CSS — Smashing Magazine — детальное описание работы z-index.
6. Полное руководство по Flexbox | CSS-Tricks — инструкция по центрированию контента.
7. Позиционирование в CSS — статьи и уроки по позиционированию.