Css 定制的灯箱无法覆盖页面的多个部分

我试着自己做一个灯箱。 我使用

div

覆盖网页，并在

div

中显示图像、按钮等

这个div有一个半透明的背景图像来“暗淡”一切

问题是有三件事是无法衡量的。（它们与图像重叠）

-openlayers地图（在html5的

文章中）

-html5
视频
标签

-html5
详细信息
标签

这种情况在跨浏览器时发生

有什么想法吗？与html5有关吗？标记在DOM中的位置/顺序还是什么

提前谢谢

编辑

这是代码。希望能有帮助。来自2200行的文件，因此其已编辑。问我你是否需要更多的规格

 <script type='text/javascript'>
//create image element to later append to lightbox div
var elem2 = document.createElement("img");

//open layers - set map...
map = new OpenLayers.Map('map_element', options);
//more openlayers things here

//image takes its source from an array came form a query
elem2.src=mpli[0];

//then, append to the light box div
document.getElementById("lightbox").appendChild(elem2); 

//functions for hide/show the lightbox div
function lightboxme(){
        document.getElementById("lightbox").style.display="block";

    }

    function unlightboxme(){
        document.getElementById("lightbox").style.display="none";
    }

</script>


//map's article
<article id='map_element' style='width: 900px; height: 400px;'>
</article>


//the small div that contains the image gallery - when clicked , shows the lightbox
 <div id="smallbox" onClick="lightboxme();" ></div>

//the lightbox's div
 <div id="lightbox"    style="display:none ;"  >

//lightbox's css
        #lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(semi-transparent.gif) repeat;
    text-align:center;

}


//创建图像元素以稍后附加到lightbox div
var elem2=document.createElement（“img”）；
//打开图层-设置贴图。。。
map=newOpenLayers.map（'map\u元素'，选项）；
//这里有更多openlayers的东西
//图像从来自查询的数组中获取其源
elem2.src=mpli[0]；
//然后，附加到lightbox div
document.getElementById（“lightbox”）.appendChild（elem2）；
//隐藏/显示lightbox div的函数
函数lightboxme（）{
document.getElementById（“lightbox”）.style.display=“block”；
}
函数unlightboxme（）{
document.getElementById（“lightbox”）.style.display=“无”；
}
//地图文章
//包含图像库的小div-单击时，显示lightbox
//灯箱的div
//lightbox的css
#灯箱{
位置：固定；/*将灯箱窗口保持在当前视口中*/
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：url（半透明.gif）重复；
文本对齐：居中；
}
@GiovanniSilveira Of？CSS？还是Javascript？你拥有什么？那么它可以被复制？或者更好的是，做一个it@GiovanniSilveira我刚刚编辑了这个问题。谢谢你听起来对吗？如果没有，请随时提出建议changes@GiovanniSilveira干得好。但我认为很难复制整个过程。JSFIDLE可以重新创建openLayers映射吗？这就是为什么我问它是否与索引div或其他相关。