HTML/CSS - 内嵌块显示和绝对定位答案

【问题标题】：HTML/CSS - inline block display and absolute positioningHTML/CSS - 内嵌块显示和绝对定位
【发布时间】：2011-03-10 19:51:29
【问题描述】：

我有一组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 */
}

所以我有一组非常好的带有阴影的滑块，可以自动改变宽度。

问题是 - 每次我悬停我的滑块时 - 我悬停的滑块下方的滑块会改变它的位置（“跳跃”大约 10px 上方）并且在鼠标移出时它会改变到它的“正确”位置。

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

我很想告诉你发生了什么，但我无法让 Nivo 滑块在 jsfiddle 中工作（即使在复制粘贴所有 .js 和 .css 库之后）。

【问题讨论】：

我可以问一下，当您可以使用 css 创建图像阴影时，您为什么要使用图像阴影？
@Luke Landwalker，我可以创建盒子阴影，但不能像 Photoshop 那样创建阴影（顺便说一下，我不太喜欢盒子阴影，如果有很多元素使用此功能，整个网站的速度就会大大降低下）。我什至没有提到 IE 兼容性。我只是想知道为什么内联块内的绝对定位元素会这样做。
Photoshop 中的阴影是什么意思？投射阴影？
@Luke Landwalker，我的意思是更复杂的阴影，例如。 dribbble.com/system/users/2504/screenshots/24108/… :)
ohh =) 是的，你是对的，它不会继续 jsfiddle =/。当您看不到发生了什么时，很难为您提供帮助

标签： html css nivo-slider

【解决方案1】：

没有看到它..我会这样说：

您必须使用 FireBug 检查 CSS 以查看导致 :hover 跳转的原因——一定是有什么东西在做。听起来好像您的幻灯片容器之一的高度不正确。你能给 .nivo-wrapper 一个高度而不弄乱你的设计吗？

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

【讨论】：

【解决方案2】：

我认为你应该为链接 .nivo-shadow:hover { position: absolute; left: 0px; width: 100%; } 添加一个 css 规则，这样一旦你将鼠标悬停它就会停留在那里......

【讨论】：

【解决方案3】：

我会说你必须纠正你的图像阴影的位置和块模型，默认是Replaced Element，inline：

 .nivo-shadow {
    display:block; /*<--update here*/
    position: absolute;
    left: 0;
    bottom:0; /*<--update here: you must declare it, or top */
    width: 100%; /* absolutely positioned 100% wide so fits its parent */
 }

事实上，一个absolute positioned 元素是根据通过“top”、“left”、“right”或“bottom”属性提供的坐标定位的。

【讨论】：