Как сделать перекрытие одного блока другим

Question

Нужно сделать, чтобы при наведении на блок .item появлялся блок .item__info и перекрывал блок ниже (.block) с несколькими обязательными условиями

у .wrapper должно быть position: relative; overflow-x: hidden;
у .item установлена высота блока style="height: 40px"

.wrapper является неким слайдером, поэтому .item будет несколько, и поэтому overflow-x: hidden; обязателен. А высота обязательна для того, чтобы ниже стоящие элементы не "прыгали" при наведении на целевой

.wrapper {
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: visible;
  width: max-content;
}

.item {
  background: red;
  width: max-content;
  padding: 25px;
}

.item__name {
  margin-bottom: 15px;
}

.item__info {
  opacity: 0;
  visibility: hidden;
  height: 0;
  display: none;
  background: green;
}

.item:hover .item__info {
  opacity: 1;
  visibility: visible;
  height: auto;
  display: block;
}

.block {
  background: blue;
  width: 100px;
  margin-top: 5px;
}

<div class="wrapper">
  <div class="item" style="height: 40px">
    <div class="item__name">Name</div>
    <div class="item__info">
      <div>123</div>
      <div>456</div>
    </div>
  </div>
</div>

<div class="block">
  123123123123
</div>

Answer 1

Увы, такое не получиться реализовать из-за особенности overflow которое будет "обрезать" содержимое.

Можно заколхозить допустим такое решение, но оно подойдёт при условии, если не планируется несколько .item внутри .wrapper

.wrapper {
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: visible;
  width: max-content;
}

.item {
  background: red;
  width: max-content;
  padding: 25px;
}

.item__name {
  margin-bottom: 15px;
}

.item__info {
  opacity: 0;
  visibility: hidden;
  height: 0;
  display: none;
  background: green;
  /**/
  width: 100%;
  position: absolute;
  bottom: 0;
}

.block {
  background: blue;
  width: 100px;
  margin-top: 5px;
  /**/
  position: relative;
}

.wrapper:hover ~ .block .item__info {
  opacity: 1;
  visibility: visible;
  height: auto;
  display: block;
}

<div class="wrapper">
  <div class="item" style="height: 40px">
    <div class="item__name">Name</div>
  </div>
</div>

<div class="block">
  123123123123
  <div class="item__info">
    <div>123</div>
    <div>456</div>
  </div>
</div>

Если же планируется несколько, то берём на вооружение ещё и JS.

let wrapper = document.querySelector('.wrapper'),
    clone = document.querySelector('.item__info-clone');
    
wrapper.addEventListener('mouseenter', function(e) {
  if(e.target.classList.contains('item')) {
    clone.innerHTML = e.target.querySelector('.item__info').innerHTML; 
    clone.classList.add('-active');
  }
}, true);

wrapper.addEventListener('mouseleave', function(e) {
  if(e.target.classList.contains('item')) {
    clone.classList.remove('-active');
  }
}, true);

.wrapper {
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: visible;
  width: max-content;
}

.item {
  background: red;
  width: max-content;
  padding: 25px;
}

.item__name {
  margin-bottom: 15px;
}

.item__info {
  display: none;
}

.block {
  background: blue;
  width: 100px;
  margin-top: 5px;
  /**/
  position: relative;
}

.block .item__info-clone {
  opacity: 0;
  visibility: hidden;
  height: 0;
  display: none;
  background: green;
  /**/
  width: 100%;
  position: absolute;
  bottom: 0;
}

.block .item__info-clone.-active {
  opacity: 1;
  visibility: visible;
  height: auto;
  display: block;
}

<div class="wrapper">
  <div class="item" style="height: 40px">
    <div class="item__name">Name</div>
    <div class="item__info">
      <div>123</div>
      <div>456</div>
    </div>
  </div>
  
  <div class="item" style="height: 40px">
    <div class="item__name">Name 2</div>
    <div class="item__info">
      <div>456</div>
      <div>789</div>
    </div>
  </div>
  
  <div class="item" style="height: 40px">
    <div class="item__name">Name 3</div>
    <div class="item__info">
      <div>ⅠⅡⅢ</div>
      <div>ⅣⅤⅥ</div>
    </div>
  </div>
</div>

<div class="block">
  123123123123
  <div class="item__info-clone"></div>
</div>

БЛОГ НА HUSL

Как сделать перекрытие одного блока другим

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