javascript - 当脚本试图使固定元素可见时，我的 JavaScript 代码在 Chrome 中崩溃

Question

我添加了一些带有“visibility:hidden; position:fixed;”的元素到页面顶部，出于某种原因，当我在 Chrome 中启动脚本时，它使“#pageOverlay”可见，但无法取消隐藏其他元素。这是失败的 JS 函数:

function showImage(element) {
//locating currentGalleryItemIndex

for (currentGalleryItemIndex = firstGalleryItemIndex; currentGalleryItemIndex <= lastGalleryItemIndex; currentGalleryItemIndex++) {
    if (galleryItems[currentGalleryItemIndex] === element) break;
}

//general settings

fillPreviewArea();

pageOverlay.style.visibility = "visible";

previewArea.style.visibility = "visible";

previewAreaCloseLink.style.visibility = "visible";

previewAreaActive = true;
}

在 Firefox 和 IE11 中不会发生同样的事情，如果我更改所有“position:fixed;”，它只在 chrome 中有效。到“position:absolute；”；这不是我想要使用的。

使用脚本的页面在这里:

http://spongebobia.com/spongebob-captures/gallery.php

实际的脚本在这里:

http://spongebobia.com/spongebob-captures/scripts/previewArea.js

如何在保持“位置:固定；”的同时使其工作？

Answer 1

关于"z-index" .您的 pageOverlay 的 CSS 应如下所示:

#pageOverlay {
    background: gray;
    width: 100%;
    height: 100%;
    z-index: 500;
    top: 0px;
    left: 0px;
    position: fixed;
    visibility: hidden;
    z-index: 2;
}

你的 previewAreaContainer 是这样的:

#previewAreaContainer {
    position: fixed;
    visibility: hidden;
    top: 10px;
    left: 50%;
    margin-left: -344px;
    width: 670px;
    height: 540px;
    z-index: 3;
}