css - 绝对元素上的渐变

Question

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

所以我有这段代码:

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

.gradientsx 有一个渐变背景，他的位置是绝对的。还有<ul>必须有一个绝对位置(以允许滑动)，所以 gradientsx 中的 grandient 变得不可见。我该如何解决这个问题？

示例如下:http://jsfiddle.net/tPMuA/3/

Answer 1

您可以使用 z-index 强制将 shadow-div 置于元素之上。但请注意，如果它位于元素顶部，它也可能会阻止鼠标事件。不过不确定这是否是一个问题，因为我无法从那个 fiddle 中找出 slider 的外观。

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