Search code examples
csspositioninggradient

Gradient over an absolute element

I would like to add a gradient layer to the sides of my slider.

So i have this code:

<div>
    <div id="gradientsx">
    </div>
    <ul class="slider">
        <li>item 1</li>
        [...]
    </ul>
    <div id="gradientdx">
    </div>
</div>

.gradientsx has a background with the gradient and his postision is absolute. But also the <ul> must have an absolute position (to permit the sliding), so the grandient in gradientsx became invisible. How can I fix this?

Here's the sample: http://jsfiddle.net/tPMuA/3/

Solution

  • You can use z-index to force the shadow-div on top of the items. But beware, it may also block mouse-events if it's on top of the items. Not sure if this is a problem, though, because I can't find out from that fiddle what the slider is going to look like.

    http://jsfiddle.net/tPMuA/7/