Question

我试图让元素在右边，一旦到达列表的底部，向上移动，放大，然后我将它们缩小，然后将它们添加到剪辑路径下的文本块（剪辑路径仅适用于Opera，Chrome和Safari。）

问题是我无法将元素显示在文本块之上。无论我尝试什么，它都隐藏在主要元素后面。

任何人都有任何想法我错了吗？

提前感谢您的帮助。

<style>
#main {
position: absolute;
z-index: -2;
top: 0px;
left: 0px;
width: 900px;
height: 862px;
overflow: hidden;
webkit-clip-path: polygon(73% 1.05%, ...);
clip-path: polygon(73% 1.05%, ...);
}

#side {
position: absolute;
top: 0px;
left: 900px;
font-size: 14px;
display: inline-block;
width: 490px;
height: 862px;
vertical-align: top;
text-align: center;
overflow: hidden;
margin-top: -45px;
z-index: -1;
}

.entry {
position: relative;
padding-bottom: 20px;
z-index: 20;
}

.exit {
position: relative;
padding-bottom: 20px;
z-index: 20;
}
</style>


<script>
...
$('#side div:gt(15)').animate({
    top: "-=750",
    left: "-=550",
    width: "+=350",
    height: "+=50",
    fontSize: 20
}, 2000, function() {
// Animation complete.
}); 
...
</script>



<div id="main">Lorem ipsum dolor sit amet ...</div>

<div id="side">
<div class="entry exit">Dave O'Brien - 52 - Fountain Valley, Ca.<br /><b>"Courage is not following the pack."</b></div>
...
</div>

我复制了我认为的相关代码。这是一个有效的JSFiddle，完整的代码： http://jsfiddle.net/design523/9t79z4sq/

此演示在循环中使用十个左右的引号。稍后将从数据库中一次拉出一个引号。

Answer 1

只需删除#side css中隐藏的溢出检查已更新fiddle

#side {
    position: absolute;
    top: 0px;
    left: 900px;
    font-size: 14px;
    display: inline-block;
    width: 490px;
    height: 862px;
    vertical-align: top;
    text-align: center;
    margin-top: -45px;
    z-index: -1;
}

z-index即使位置相对也不起作用

1 个答案: