标签: z-index

我正在一个有两个绝对定位的div的网站......徽标和菜单(导航栏)

即使在多次尝试z-index操作之后,IE也将它们两者都埋没了.为什么IE不能像Firefox一样工作,甚至不能为上帝而工作？

UPDATE .......

我忘了提到这些div都定位在flash电影上.我怎么可能把它留下来？!

我有一个带有"opaque"类的div和另一个带有"product-info"类的div,它们都处于同一级别.

代码如下:

<div class="opaque"></div>
<div class="product-info">
    <img class="product-image" src="/Images/D3.jpg" />
    fsdfdsfsdfs
</div>

.opaque 
{
    background-color: White;
-moz-opacity:.60; filter:alpha(opacity=60); opacity:.60;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
}

.product-info 
{
padding: 5px;
text-align: center;
z-index: 2;
}

请注意,product-info设置为z-index 2,opaque设置为z-index 1.因此,product-info应显示在opaque上,因此不应该褪色.但是,product-info(和text)中的图像会变淡.这种情况发生在Chrome和Opera中,因此我希望这是应该发生的事情,因为它们不是IE!

如上所示,有许多HTML代码,每个嵌套在lis中,设置为向左浮动,宽度为33%.当页面完全加载($(window).load())时,我使用jQuery来检测所有产品的最大高度,并将该高度应用于所有其他产品.我已经尝试删除所有的jQuery,以防这会影响z-index,但我得到的结果只有不整齐的外观和感觉.

我尝试过使用Google Chromes Inspect Element工具,所讨论的元素正在显示正确的特征.

谁能看到我在这里做错了什么？我一直试图解决这个问题几天,并想知道发生了什么.

谢谢.

问候,

理查德

完整代码请求:

我认为这就是所需要的.我将在几分钟内创建一个只包含此代码的页面,以查看它是否重现了该问题.

<div id="BodyTag_ContentPanel">
    <div class="overlay-background"></div>
    <div class="scroll-pane">
        <div>
            <ul class="product-list">
                <li class="product">
                    <div class="spacer">
                        <div class="opaque"></div>
                        <div class="product-info">
                            <img class="product-image" src="/Images/D3.jpg" />
                            <div class="enlarge"> …

我在IE8中遇到z-index问题(其他IS尚未测试):

以下JS创建了一些html/css:

document.write('<img id="' + sas_Banderole.getObjId('cb') + '" src="' + cburl + '" style="position:absolute; top:5px; cursor:pointer;" onclick="sas_Banderole.trigger();" border=0>');
document.write('<div ID="closeReminder" style="z-index:10000; background-color:transparent; text-align: right; display:none; width:30px; height:100px; right: 0px; position:absolute; top:5px; cursor:pointer; color:fff; font-size:10px;" onclick="reminder_close();" border=0>&nbsp;</div>');


document.write('</div>');

结果应该是,我有:

• 带关闭功能的IMG标签(关闭按钮).
• 一个DIV标记,它创建一个具有高z-index的div层"CloseReminder"和一个用于关闭父层的onClick事件

DIV必须在IMG前面,并且应该符合css.

在FF,CHrome,Opera等它正在工作,但在IE8中,该层正在放置图像.我不明白,为什么......

我发现,如果我给图层一个背景颜色(蓝色),div就会放在图像前面,不幸的是,如果我给它背景颜色"透明"(它必须是不可见的)

有人有线索吗？谢谢你的帮助,

最好的,德克

我在z-index和定位方面遇到了一些问题.基本上,当您将鼠标悬停在菜单项(主页,大约等)上时,应在菜单下方加载油漆溅:

http://www.saradouglas.net/home

样式表位于此处.

当每个splash div设置为绝对定位时,这工作正常,但我意识到这些将出现在不同屏幕分辨率的不同位置.我认为只是将其改为相对定位,然后相应地调整坐标.不幸的是现在我的飞溅没有出现在菜单下面,就像他们应该的那样.

为了澄清,我希望在菜单下显示飞溅 - 因此菜单应始终显示在飞溅的顶部.这只是一个问题,因为将菜单设置为相对,这些溅到绝对.

我希望这是一个简单的解决方法,我只是遗漏了一些东西.我希望有人能告诉我哪里出错了并提供解决方案!

到目前为止已经提交了一些很好的答案,但不幸的是他们没有解决我的问题.我已经尝试将菜单背景添加到ul类而不是div,但这对问题没有任何影响.

我在所有浏览器中都能正常显示的网站上有一个下拉菜单,包括Chrome,直到最近.现在在Chrome 19中它被渲染在另一个元素后面,即使它们都有定位并且菜单具有更高的z-index.

见右上角图片:

这是网站:http: //www.mediaplanet.com/international/

这是一个渲染错误还是我的代码有问题？

我有以下div设置,只适用于IE9.在Moz和Webkit上,onclick不会触发.如果我将z-index变为0,则onclick可以工作,但我对网站中的其他元素有可见性问题.有没有办法通过负z-指数获得onclick？

<div id="adbg" style="margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor: pointer; z-index: -1;">
<div OnClick="window.open('/bgClicks/2');" style="background: #fff url('http://www.example.com/img/bg/w_1.jpg') no-repeat center top fixed; height: 100%; width: 100%; margin: 0pt auto; cursor: pointer;"></div>
</div>
<div id="wrapper">

我drop-down在标题中使用菜单进行通知，但是当下拉列表打开时所有可见的div后面都打开了，那么我将z-index所有div 都给了，但是这些div上的链接现在无法单击！

下拉div CSS：

.drop-down{
   overflow:scroll;
   overflow-x:hidden;
}

而div的背后是

#main-div{
   z-index:-1;
   position:absolute;
}

我们有一些框来显示悬停的一些数据.因此,当我们将鼠标移动到一个元素上时,它应该展开,在其他元素前面,并显示隐藏的数据.

我做了这样的事情:

box:hover {
    z-index: 50;
}

但是有一个问题; 当我们将鼠标移动到另一个外部空白区域时,z-index返回到值,与其他空格相同.因此,可见悬停元素位于下层而不是下一层.

如何防止财产申请,直到过渡期结束？

这是我的jsFiddle.尝试将鼠标悬停在一个元素上,将鼠标移出元素,其他元素的背景图像将在转换结束前位于我们的悬停元素前面.

更新:这是问题的屏幕截图.这是我们在元素上取消的时候.background-image另一个元素出现在我们悬停的元素前面.

情况:

给出以下简化的HTML示例:

• 将内容放在内容后面,使其成为底部粘性
• 滚动到页面末尾时:页脚将从后面的内容中解开

我能够做到这一点,但是当我拥有html并且body都将它的overflow-x属性设置hidden为页脚中的那些链接时是不可点击的.

更新情况:

我知道可以将z-indices设置为#content2和footer1来使链接可以点击,但这会干扰来自页面不同部分的multizoom.js并且不是我感兴趣的.

题:

什么设置overflow-x这两个html和body在脚注中的链接呢？为什么两个元素都必须设置此属性？(如果只是其中一个省略overflow-x了链接是可点击的)

事实上,对我来说,不再设置overflow-x原始项目是没有问题的,因为它是过时样式尝试的遗留物,并且已经被删除.但我很好奇为什么会有这么奇怪的行为？

例:

/* This statement prevents the links in the footer
 * from being clickable */
html, body {
  overflow-x: hidden;
}
/* necessary statements to put footer behind content and
 * make it bottom sticky behind content */
#content …

Android允许在另一个模态之上渲染模态,从而允许在模态之上叠加内容.iOS遗憾的是没有显示第二个Modal.我已经尝试了几种zIndex和订购组件的组合而没有运气.是否无法在iOS上的Modal上叠加内容？