Safari中的绝对定位搞砸了答案

【问题标题】：Absolute positioning messed up in SafariSafari中的绝对定位搞砸了
【发布时间】：2022-02-11 08:21:32
【问题描述】：

我尝试用 jQuery 做一个鼠标悬停淡入淡出效果。这个想法是让两个图像以这种方式相互叠加。

<img class="img-circle webdesign " src="assets/img/webdesign_.png" style="position: absolute;" >
<img class="img-circle" src="assets/img/webdesign_hover.png">

它适用于 Chrome。截图（http://cl.ly/image/0f3M0f2q1t2S）

但是，我在 Safari 上遇到了这个问题 (http://cl.ly/image/44290O3n1X0b)

您可以在页面加载时看到这两个图像，尽管灰度图像应该出现在彩色图像的顶部并隐藏后者。

建议？

【问题讨论】：

同时设置position:absolute，将两者的top和left属性设置为相同，将最上面的z-index设置为更大。或者，更好的是，使用display:none 将底部的完全隐藏起来，并与jQuery 一起切换它们的可见性。
设置显式 top 和 left 应该可以。 z-index 将无济于事，除非您需要将前者放在后者之上。
@Jan 是的，但是因为他打算使用旨在提供机制的效果来切换排序。不过我还是更喜欢另一种方法...

标签： css safari

【解决方案1】：

对于具有绝对定位的元素，我也遇到了一些问题（仅限 Safari）。我通过指定 left 和 right 属性解决了这个问题：

.element{
  position:absolute;
  left:0;
  right:0;
}

【讨论】：

【解决方案2】：

HTML

<img class="img-circle webdesign " src="assets/img/webdesign_.png">
<img class="img-circle" src="assets/img/webdesign_hover.png" style='display:none;'>

$('.img-circle').mouseenter(function() {
    $('.img-circle').toggle();
});

CSS

.img-circle {
    position: absolute;
    top: ???;
    left: ???;
}

【讨论】：

【解决方案3】：

这对我来说在类似的挑战中起到了作用：

position: absolute;
top: 8px;
margin-left: 14px;

【讨论】：