Прокручиваемая таблица с парящим содержимым

Question

У меня есть проблема с задачей, которую я сейчас записал в Codepen .

.content {
  display: none;
  position: absolute;
}
td:hover .content {
  display: block;
  position: absolute;
  width: 250px;
  z-index: 1;
  background-color: #ffcce0;
  color: black;
  border: 4px solid #ffb3d1;
  border-radius: 10px;
}

Когда я наведу курсор на значок, содержимое показывает, как должно, но когда я прокручиваювниз или в сторону и снова наведите тот же значок, когда позиция содержимого сместится от исходной позиции.В Mozilla все работает отлично!Как мне решить эту проблему?Кажется, это ошибка Chrome, верно?(если возможно, решение должно быть без Javascript)

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

Answer 1

Я придумал это решение: Codepen

• Я дал вашему table a position: relative;, чтобы элемент .content былотносительно его родителя (table).
• Я также стилизовал ваш .content таким образом, чтобы он идеально подходил под table при наведении.

body {
  background-color: #ffe6e6;
}
.container {
  position: relative;
  width: 700px;
  margin: auto;
  padding: 10px;
}
.table {
  background-color: #ffffcc;
}
.scroll {
 overflow-x: auto;
 overflow-y: auto;
 max-height: 200px;
 width: 100%;
}
.green{
  color: lime;
}
td {
  text-align: center;
}
.content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  height: 100px;
  width: 250px;
  z-index: 1;
  background-color: #ffcce0;
  color: black;
  border: 4px solid #ffb3d1;
  border-radius: 10px;
}
td:hover .content {
  display: block;
}

Answer 2

Вы можете разместить всплывающее окно, где хотите, добавив position: relative; к своим элементам td.Это делает положение всплывающего окна относительно td.

Однако это вызовет проблему для элементов td, которые расположены вдоль нижней или правой стороны таблицы;они будут скрыты в прокручиваемом элементе.

AFAIK единственный способ решить это - через Javascript, поэтому, например, Bootstrap использует JS для их позиционирования.(Bootstrap использует библиотеку Popper.js https://popper.js.org/)