HTML/CSS - inline block display and absolute positioning

I have a set of nivo sliders. I wanted to attach a shadow to each one so I've created wrappers and absolutely positioned shadows:

<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 */
}

So I have a very nice set of sliders with shadows that automatically change width.

The problem is - every time I hover my slider - the slider below the one I hovered changes it's position ("jumps" around 10px above) and on mouseout it changes to it's "proper" position.

It stops, when I change nivo-shadows position to relative/static (but this way the shadow has wrong width).

I'd love to show you what happens, but I couldn't make Nivo slider working in jsfiddle (even after copy-pasting all .js & .css libraries).

without seeing it.. I'll say this:

You gotta check the CSS using FireBug to see what is causing the jump on :hover -- there must be something doing it. It almost sounds as if you have the incorrect height for one of your slide containers. Could you give .nivo-wrapper a height without messing up your design?

Also, have you tried using top:0 or bottom:0 for your shadow? That seemed like it could effect it..

I think you should add a css rule for links .nivo-shadow:hover { position: absolute; left: 0px; width: 100%; } so once you'd hover it stays there...

I would say that you have to correct the position and the block model of your image shadow, that is a Replaced Element, inline by default:

 .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 */
 }

In fact, one absolute positioned element is positioned according to the coordinates provided through the “top”, “left”, “right” or “bottom” properties.