处理溢出的负位置图像:自动

Handling negative-position images with overflow:auto

本文关键字：图像 自动 位置图 位置 溢出 处理      更新时间：2023-09-26

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

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

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

我最终只是求助于Javascript。这里，通过计算与页面主体内的li的绝对位置的偏移，将图像定位在id为"myli"的li的左侧50个像素和id为CCD_4的CCD_3的上方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);
相关文章：