首页| 版块| 我的| 发帖| 消息
主题:关于祺声广播(滴答插件)滚动内容显示的调整及首页多格里“最新图片”标题和背景位置的微调
zhangjingyu 
“/*使用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;),这又会引发老表格的“排版崩溃”连锁反应。

浏览大图
zhangjingyu回帖于2026-10-31 22:49[查看电脑版]
下一楼»:“#duogepic_1 .duogepicBg {
top: 108px !important; /* 还原原作者测试的固定数值 */ ..
«上一楼:“刚才回车直接发送了,我说是当初这两个距离112像素和108像素肯定是经过仔细调试测试后确 ..

查看全部回帖(29)
«返回主帖