Как сделать так, чтобы блок с абсолютным позиционированием из родительского компонента со скроллом не скрывался?

Question

Раис

css , html

Как сделать так, чтобы блок с абсолютным позиционированием из родительского компонента со скроллом не скрывался?

Как сделать так, чтобы блок с абсолютным позиционированием из родительского компонента перекрывал блок со скроллом при наведении на красный блок, чтобы зеленый блок появлялся поверх него? Сейчас он скрывается из-за свойства overflow. Нашла статью, где описано, как сделать перекрытие для первого div внутри списка, но мне нужно сделать это для других элементов. Буду признательна за помощь!

24 марта 2024 г. 15:19

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для того чтобы блок с абсолютным позиционированием из родительского компонента не скрывался при использовании свойства overflow, можно наложить свойство z-index на этот блок. Например:

```css
.parent {
  position: relative;
  overflow: scroll;
}

.absolutely-positioned {
  position: absolute;
  z-index: 1;
}
```

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

```css
.parent {
  position: relative;
  overflow: scroll;
}

.absolutely-positioned {
  position: absolute;
  z-index: 1;
  display: none;
}

.parent:hover .absolutely-positioned {
  display: block;
  z-index: 2;
}
```

Таким образом, при наведении на родительский элемент блок с абсолютным позиционированием будет перекрывать блок со скроллом. Надеюсь, это поможет! Если у вас остались какие-то вопросы, пожалуйста, уточните и я постараюсь помочь вам дальше.

Answer 2

Уберите position: relative; из .box 
 Но вообще, я бы советовал использовать что-то вроде tippyjs так как все эти трюки с позиционированием могут аукнуться.