Как совместить position absolute и overflow

Question

Сразу давайте смоделируем проблему. У меня есть блок(box) со свойством overflow: scroll; и в этом блоке есть несколько items(smaller-box). При наведении на item выскакивает облочко(hidden-content), но нужно чтобы облако отображалось даже вне главного блока , а так как главный блок имеет свойство scroll то половина облака срезаеться (что впринципе логично). Как можно обойти этот overflow, чтобы облочко полностью отображалось и не ломать сам overflow: scroll;

<div class="box">
    <!-- И таких items 9 штук -->
    <div class="smaller-box">
        1
        <div class="hidden-content">
            <p>Hidden text 1</p>
        </div>
    </div>
</div>


.box {
    width: 600px;
    min-height: 250px;
    max-height: 400px;

    overflow-y: scroll;

    background-color: yellow;

    display: flex;
    flex-wrap: wrap;
}

.smaller-box {
    position: relative;
    cursor: pointer;
    width: 160px;
    height: 160px;
    background-color: red;
    margin: 1rem 1rem;
}

.hidden-content {
    opacity: 0;
    margin: 1rem 1rem;
    position: absolute;
    top: -150px;
    left: 0;

    width: 200px;
    height: 200px;
    background-color: green;
    z-index: 100;
}

.smaller-box:hover .hidden-content {
    opacity: 1;
}

При наведение на блок 4:

При наведение на блок 1: (облочко срезаеться)

Answer 1

Я использовал position: fixed; для .hidden-content
Так-же можно дописать в HTML для каждого отдельного всплывающего контейнера по классу и в классе указать нужные координаты для них.
Ну и соответсвенно hover применять на каждый отдельно.

Example:

.smaller-box1:hover .hidden-content1 {
    opacity: 1;
}
.smaller-box2:hover .hidden-content2 {
    opacity: 1;
}
.smaller-box3:hover .hidden-content3 {
    opacity: 1;
}

body {
  margin-top: 50px;
}

.box {
    width: 600px;
    min-height: 250px;
    max-height: 400px;

    overflow-y: scroll;

    background-color: yellow;

    display: flex;
    flex-wrap: wrap;
}

.smaller-box {
    cursor: pointer;
    width: 160px;
    height: 160px;
    background-color: red;
    margin: 1rem 1rem;
}

.hidden-content {
    opacity: 0;
    margin: 1rem 1rem;
    position: fixed;
    width: 200px;
    height: 200px;
    background-color: green;
    z-index: 100;
}

.smaller-box:hover .hidden-content {
    opacity: 1;
}

<div class="box">
    <!-- И таких items 9 штук -->
    <div class="smaller-box">
        1
        <div class="hidden-content">
            <p>Hidden text 1</p>
        </div>
    </div>
      <div class="smaller-box">
        2
        <div class="hidden-content">
            <p>Hidden text 1</p>
        </div>
    </div>
      <div class="smaller-box">
        3
        <div class="hidden-content">
            <p>Hidden text 1</p>
        </div>
    </div>
      <div class="smaller-box">
        4
        <div class="hidden-content">
            <p>Hidden text 1</p>
        </div>
    </div>
      <div class="smaller-box">
        5
        <div class="hidden-content">
            <p>Hidden text 1</p>
        </div>
    </div>
      <div class="smaller-box">
        6
        <div class="hidden-content">
            <p>Hidden text 1</p>
        </div>
    </div>
      <div class="smaller-box">
        7
        <div class="hidden-content">
            <p>Hidden text 1</p>
        </div>
    </div>
      <div class="smaller-box">
        8
        <div class="hidden-content">
            <p>Hidden text 1</p>
        </div>
    </div>
      <div class="smaller-box">
        9
        <div class="hidden-content">
            <p>Hidden text 1</p>
        </div>
    </div>
</div>

БЛОГ НА HUSL

Как совместить position absolute и overflow

Ответы (1 шт):