javascript - 使用溢出处理负位置图像：自动

Question

考虑以下标记：http: //jsfiddle.net/gbWgH/。因为列表溢出了它的容器并与下面的文本重叠，所以我希望它可以滚动，所以我将它设置为overflow:auto. 但是，这会切断部分图像：http: //jsfiddle.net/gbWgH/1/。删除此规则会使图像正确显示。

如何在不切断图像的情况下使文本可滚动？如this answer中所建议的那样，使用Javascript手动计算坐标是最简单的选择吗？

Answer 1

img {position:relative; top : 20px; left : 20px;}

Answer 2

我最终只是求助于Javascript。在这里，通过计算与页面正文中的绝对位置的偏移量，图像位于左侧 50 像素和带有 id 的 a 上方 40 像素处li，"myli"在ul带有 id的 a 内。请注意，您必须考虑已滚动的金额。"myul"liul

var img = document.createElement("img");
img.src = ...

var li = document.getElementById("myli");
var scrollTop = document.getElementById("myul").scrollTop;

img.style.left = li.offsetLeft - 50 + 'px';
img.style.top = li.offsetTop - 40 - scrollTop + 'px';
img.style.position = 'absolute';

document.body.appendChild(img);