Как получить marginLeft из элемента с абсолютной позицией?

Question

Я пытаюсь добавить информационное поле над чем-либо, когда вы наводите курсор на него мышью, но мне нужно получить левое поле элемента, так как он перемещается, но у него нет свойства margin-left в CSS, и его положение относительно, поэтому мне не нужно добавлять свойство margin-left. Я пытался сделать element1.style.marginLeft = element2.style.marginLeft, но он всегда возвращает 0

Answer 1

Все, что я сделал, вместо того, чтобы разделить их каким-либо образом, все, что я сделал, это просто установил оба элемента внутри элемента <div>, и все получилось!

Answer 2

Вот пример, который использует только CSS для отображения всплывающего окна с информацией. Для перемещения окна используется transform вместо margin. Причина в том, что анимация с transform более производительная, чем margin, и анимация будет выглядеть намного плавнее на всех устройствах. В следующем примере также используются некоторые атрибуты WAI-ARIA, чтобы сделать его более доступным для пользователей программ чтения с экрана.

.container {
  position: relative;
  display: inline-block;
}

[role=dialog] {
  position: absolute;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 45px));
  transition: 0.3s transform, 0.3s opacity;
  background-color: #333;
  color: white;
  font-family: sans-serif;
  padding: .5em;
  width: 70%;
  pointer-events: none;
  font-size: .9rem;
}

.myInfo:hover+[role=dialog],
.myInfo:focus+[role=dialog] {
  opacity: 1;
  transform: translate(-50%, calc(-50% + 40px));
}

p {
  margin: 0;
  padding: 1em 2em 1em 1em;
  background-color: #eee;
  position: relative;
}

p img {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

<div class="container">
  <p class="myInfo" aria-describedby="infoDialog">I have more information <img src="https://image.flaticon.com/icons/svg/1828/1828885.svg" alt="Info icon" width="16" height="16" role="presentation"></p>
  <div id="infoDialog" role="dialog">
    More information found here
  </div>
</div>

jsFiddle