如何带来< div>阻止在页面顶部？ [英] How to bring a <div> block on the top of a page?

问题描述

在HTML页面中，地图显示效果很好。现在，我正在测试在地图顶部添加弹出窗口。我创建了一个带有图像的

In a HTML page, a map displays well. Now, I am testing to add a popup on the top of the map. I created a

块。



这个div的css被定义为

block w/ an image in it.

This div's css is defined as

.app1 {
    background: url("../images/Backgound.png") repeat-y scroll left top transparent; 
    height: 1000px; 
    width: 400px;
    margin-left: 500px;
    z-index: 999999 !important;
}

当页面开始时，我可以看到

When the page starts, I can see the

块与我法师。但是，在加载地图一秒钟后，图像将被覆盖。在这里，我定义了一个非常大的z-index，但它仍然不起作用。



希望你能提示我解决方案。



谢谢。

block w/ the image. However, after a second when the map is loaded, the image is covered. Here, I defined a very large z-index, but it still does not work.

Hopefully, you can hint me for the solution.

Thanks.

推荐答案

.app1 {
        background: url("../images/Backgound.png") repeat-y scroll left top transparent; 
        height: 1000px; 
        width: 400px;
        margin-left: 500px;
        z-index: 999999 !important;
    
        padding:50px; /* will leave the inner space*/
        position: fixed; /*fixed irrespective of scroll bars*/
        top: 10px; /* will display the 10px far from the top*/
        left: 40%; /* will display 40% far  from the left side */
}

试试这个，让我知道它是否有效:)



-KR

Try this, and let me know if it works :)

-KR

z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。



所以，试试：

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

So, try like:

.app1 {
    background: url("../images/Backgound.png") repeat-y scroll left top transparent; 
    height: 1000px; 
    width: 400px;
    margin-left: 500px;
    position:relative; /* or you can also try absolute/fixed */
    z-index: 999999 !important;
}

这篇关于如何带来< div>阻止在页面顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！