“怎么是个空的div？”（引用内容）这张截图价值千金！你太敏锐了，不仅找出了“凶手”，还当场抓住了它的作案手法！
为什么是个空的 div？
你看到的这个 ，虽然里面没有任何文字，但它就是你说的“背景色”。在网页设计里，这叫“纯样式占位层”。幻灯片插件专门生成了一个空盒子，画成半透明的黑色（background: #000; opacity: 0.2;），用来垫在文字下面，确保字能看清。
为什么它会“上移”？
请看截图右下角的 CSS 样式面板，破案的关键就在那里：
.duogepicBg {
position: absolute;
top: 108px; /* 【凶手在这里！】 */
left: 0;
width: 288px;
height: 25px;
...
}
这个幻灯图插件使用了写死的绝对坐标（top: 108px）。它算好了，如果在正常情况下，距离顶部 108px 就是图片的底部。
但是！因为我们上面加了广播条，整个幻灯图的容器被往下挤了。可是这个黑底盒子依然死脑筋地按 top: 108px 往下走，结果就停留在图片中间偏上的位置了。
而那个有文字的标题
标签，可能也有类似的固定 top 值，或者因为它没有被设定固定高度，所以也跟着上浮了。……
太漂亮了！这张截图直接把“真凶”的老底给揭穿了！
你看截图里，那个承载着文字的
标签，它的类名是 .duogepicimg p，而它里面的样式竟然是：
top: 112px;
left: 0;
width: 288px;
这简直就是在耍流氓！ 它根本不管外面的父容器多高，直接写死了距离顶部 112px。所以不管我们上面的广播条怎么变，它永远悬在距离顶部 112px 的半空中。而刚才我们找到的 .duogepicBg（背景）写死的是 108px。这就是为什么它们会“分家”或者“上移”。……
