Poshy Tip不会与滚动元素一起移动

debugcn 发表于 Dev

用户名

在滚动div内创建Poshy Tip时，在div滚动时，尖端不会移动。

看到这个小提琴。

我假设这是因为tip div是的子级，<body>而不是滚动容器div的子级。

有办法解决这个问题吗？

猴子宙斯

JSFIDDLE v2

描述：

PoshyTip实际上是在文档末尾创建的，并且具有position：absolute和top：0px以及z-index：1000，这意味着它将始终覆盖主体并定位到主体。为了使它起作用，您将必须更改DOM才能将PoshyTip移到“单击我”中，因此它将如下所示：

<span id="tip">Click me
    <div class="tip-yellow" style="visibility: inherit; left: 62px; top: 0px; border: 0px; padding: 0px; background-image: none; background-color: transparent; opacity: 1;"><table class="tip-table" border="0" cellpadding="0" cellspacing="0" style="width: 169px;"><tbody><tr><td class="tip-top tip-bg-image" colspan="2" style="background-image: url(http://vadikom.com/demos/poshytip/src/tip-yellow/tip-yellow.png);"><span></span></td><td class="tip-right tip-bg-image" rowspan="2" style="background-image: url(http://vadikom.com/demos/poshytip/src/tip-yellow/tip-yellow.png);"><span></span></td></tr><tr><td class="tip-left tip-bg-image" rowspan="2" style="background-image: url(http://vadikom.com/demos/poshytip/src/tip-yellow/tip-yellow.png);"><span></span></td><td style="width: 100%;"><div class="tip-inner tip-bg-image" style="background-image: url(http://vadikom.com/demos/poshytip/src/tip-yellow/tip-yellow.png);">Scroll and I won't move</div></td></tr><tr><td class="tip-bottom tip-bg-image" colspan="2" style="background-image: url(http://vadikom.com/demos/poshytip/src/tip-yellow/tip-yellow.png);"><span></span></td></tr></tbody></table><div class="tip-arrow tip-arrow-left" style="visibility: inherit;"></div></div>
</span>

接下来，您将需要设置SPANs position：relative，所以它将像这样：

<span id="tip" style="position:relative;">Click me

最后，您需要为top-yellow类设置top：-8px

<div class="tip-yellow" style="top:-8px; visibility: inherit; left: 62px; top: 0px; border: 0px; padding: 0px; background-image: none; background-color: transparent; opacity: 1;">

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。