Как обойти overflow hidden элемент у которого позиция absolute?

Чтобы обойти свойство overflow: hidden для элемента с позицией absolute, можно использовать различные подходы, в зависимости от конкретных требований и контекста. Вот некоторые из них:

1. Перемещение элемента за пределы родительского контейнера: Вы можете задать элементу отрицательные значения для свойств left или top, чтобы вывести его за пределы родительского контейнера с overflow: hidden. Например:

.absolute-element {
  position: absolute;
  left: -100%;
}

2. Использование псевдоэлементов: Вы также можете попробовать использовать псевдоэлементы для создания "выхода" за пределы элемента с overflow: hidden. Для этого стоит задать позиционирование псевдоэлемента относительно родительского контейнера. Например:

.parent-element {
  overflow: hidden;
  position: relative;
}

.absolute-element::before {
  content: '';
  position: absolute;
  left: 100%;
}

3. Использование искусственного родительского контейнера: Если вам необходимо представить элемент за пределами родительского контейнера, вы можете создать искусственный блок-обертку вне этого контейнера. Затем вы устанавливаете свойство overflow: hidden для родительского контейнера, а элемент с позицией absolute помещаете в блок-обертку. Например:

<div class="wrapper">
  <div class="parent-element">
    <div class="absolute-element"></div>
  </div>
</div>

.wrapper {
  overflow: hidden;
}

.parent-element {
  position: relative;
  height: 100px;
}

.absolute-element {
  position: absolute;
  top: -100px;
}

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