css - 绝对元素上的渐变

Question

我想在滑块的两侧添加一个渐变层。

所以我有这个代码：

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

.gradientsx 有一个渐变背景，他的位置是绝对的。但也<ul>必须有一个绝对位置（允许滑动），所以梯度x 中的宏大变得不可见。我怎样才能解决这个问题？

这是示例：http: //jsfiddle.net/tPMuA/3/

Answer 1

您可以使用z-index在项目顶部强制使用 shadow-div。但请注意，如果它位于项目之上，它也可能会阻止鼠标事件。不过，不确定这是否是一个问题，因为我无法从那个小提琴中找出滑块会是什么样子。

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