javascript - Z-index 大于 Fancybox？

Question

我有一个divFancybox 内部，我想溢出到 fancybox 窗口的边缘。

页面结构如下所示：

<div class="fanybox">
    <div class="overflow">
        Test
    </div>
</div>

我想.overflow流过窗户的边缘。尝试将z-indexof更改为.overflow高于 8030（默认 Fancybox 值）的值不起作用，是的，div绝对定位。

有没有什么办法解决这一问题？我可以提供我正在尝试完成的工作的图像。

score 3 · Accepted Answer

我自己没有使用过 fancybox，但是在他们的演示页面上玩弄 chrome 控制台我想我得到了你想要的效果。

- 删除溢出：隐藏；在#fancybox-content 上。

#fancybox-image (or whatever your container is){
.
.
.
    position:relative;
    right:50px;
    z-index:9000;
}

这就是他们演示页面上的全部内容。只要您的内容的父级没有静态定位，并且溢出没有隐藏，那么绝对应该是可行的。如果我了解您的目标，我可能会相对（不是绝对）定位它。希望有帮助。

编辑

好吧，我从提供的链接中使用 fancybox2 下载并获得了一个简单的页面（因为显然我手头有太多时间:-)。使用它们的所有默认值，我只需要更改 jquery.fancybox.css

.fancybox-inner {

position:relative;
right:50px;
}

并且图像漂浮在容器 div 之外。如果您尝试移动单独的 div 或添加的内容，则原则是相同的。但它确实有效......祝你好运。

score 0 · Accepted Answer

如果overflow元素在内部fancybox，则根本不需要任何元素z-index。每个非static定位元素都会生成自己的栈，fancybox 中相对定位的内容很容易溢出其外部元素 [ Demo ]。

2 回答 2