如何从具有绝对位置的元素中获取marginLeft

Question

当你用鼠标悬停在某个元素上时，我试图在它上面添加一个信息框，但由于它在移动，我需要获得元素的左边距，但它在CSS中没有margin-left属性，而且它的位置是相对的，所以我真的不需要添加margin-lift属性。我试过做element1.style.marginLeft = element2.style.marginLeft，但它总是返回0

Answer 1

下面是一个仅使用CSS来显示popover信息框的示例。它使用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

Answer 2

我所做的只是将它们以某种方式分离，而只是将两个元素都设置在<div>元素中，最终它就工作了！