使用overflow：auto处理负位置图像

Question

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

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

中所述

Answer 1

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

Answer 2

我最终只是诉诸于Javascript。在此处，通过计算与li的{​​{1}}内的"myli"，ul位于标识"myul"之上的位置，位于左侧50像素，位于li上方40像素ul在页面正文中的绝对位置。请注意，您必须考虑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); 已滚动的金额。

{{1}}