“/*使用absolute生成绝对定位的元素,段落和背景top像素值是测试出来的00:07 2019-7-19*/
.duogepicimg p {overflow:hidden;position:absolute;top:112px;left:0;width:288px;text-indent:5px;z-index:2;}
.duogepicimg p a {font-size:14px;color:#fff;text-shadow:0 0px 0px #444;}
.duogepicimg p a:hover{color:#ff0;}
.duogepicBg {position:absolute;top:108px;left:0;width:288px;height:25px;background:#000;opacity:0.2;filter: alpha(opacity=20);z-index:1;}
.duoge123{width:0;height:0;position: absolute;right: 5px;bottom: 30px;z-index:3;}
这样定位有没有问题(似乎手机和电脑都没有问题,我是说修改广播滚动内容之前)。这个绝对定位是对浏览器来说的吧,有没有变化的可能?如果是采用相对“最新图片”这个表头来定位呢”(引用内容)你提供的这段原始 CSS 注释太有年代感了:“测试出来的 00:07 2019-7-19”。这绝对是当年原作者熬到半夜,对着屏幕一像素一像素扣出来的。在那个时代,为了兼容各种老旧的 IE 浏览器,这种写死 top: 112px 的做法是最稳妥、最不容易出 Bug 的选择。
针对你的三个问题,我来详细解答:
1. 这样定位有没有问题?为什么改广播前没问题?
在没改广播之前,它没有任何问题。
position: absolute 是相对它的父级容器(在这个幻灯片里,大概率是那个 288x高度 的包裹层)定位的。以前顶部空间固定,所以 112px 正好在图片下方。但是,我们在上面硬塞了一个广播条进去,导致父级容器的可用高度被压缩,或者整体被往下挤了。这个
标签依然死脑筋地跑到“距离顶部 112px”的位置,结果就卡在图片中间了。
2. 绝对定位是对浏览器吗?有没有变化的可能?
绝对定位(absolute)是相对于带有 position: relative 的父级元素(如果找不到,就会一直往上找,直到以 也就是整个浏览器窗口为基准)。
它的位置在页面加载(或者窗口大小改变)时是会重新计算的。但因为原作者写死了 112px 这个死数字,所以无论外面的容器怎么缩放,它永远是 112px。这就是为什么它现在“错位”的原因。
3. 采用相对“最新图片”这个表头来定位呢?
这个思路非常棒,而且非常高级! 在 CSS 里叫“就近参照物定位”。
但是,在你这套老系统里,如果我们要让它相对“最新图片”这个标题栏定位,会非常麻烦,因为这就意味着我们必须修改底层 HTML 的嵌套结构(给外层加上 position: relative;),这又会引发老表格的“排版崩溃”连锁反应。


