HTML/CSS - 内联 block 显示和绝对定位

Question

我有一套 nivo sliders .我想给每个人附加一个阴影，所以我创建了包装器和绝对定位的阴影:

<div class="nivo-wrapper">
   (my slider code here)
   <img src="shadow.png" class="nivo-shadow" alt=""/>
</div>

CSS:

.nivo-wrapper {
    position: relative;
    padding: 0 0 30px 0;
    display: inline-block; /*inline block so it has the same width as slider */
    border: solid 1px red;
}

.nivo-shadow {
    position: absolute;
    left: 0;
    width: 100%; /* absolutely positioned 100% wide so fits its parent */
}

所以我有一组非常漂亮的 slider ，带有自动改变宽度的阴影。

问题是 - 每次我将我的 slider 悬停时 - 我悬停的 slider 下方的 slider 会改变它的位置(“跳跃”大约 10px 以上)并且在鼠标移开时它会改变到它的“正确”位置。

当我将 nivo-shadows 位置更改为相对/静态时它停止了(但这样阴影的宽度错误)。

我很想向您展示发生了什么，但我无法让 Nivo slider 在 jsfiddle 中工作(即使在复制粘贴所有 .js 和 .css 库之后)。

Answer 1

没有看到..我会这样说:

您必须使用 FireBug 检查 CSS，看看是什么导致了 :hover 上的跳跃——一定是有什么东西在做。听起来好像您的其中一个载玻片容器的高度不正确。你能在不打乱你的设计的情况下给 .nivo-wrapper 一个高度吗？

此外，您是否尝试过使用 top:0 或 bottom:0 作为阴影？这似乎可以影响它..