标签: z-index

所以我有几个div叠加在一起,具有不同的z-index值.

浏览器的默认行为似乎是绑定到最顶层的z-index div的事件被触发.即我为每个div有一个onclicks,但只有当点击该区域时才会触发前一个.

有没有办法可以触发附加到所有div的事件,无论每个div的z-index是什么,只要行为超过该div而不考虑z-index？

我屏幕上有一堆div.我想要做的是,当我选择任何div时,我希望它的zIndex总是高于所有其他div.

在我的应用程序中,每当我选择div时,我都需要反复执行此操作,将其置于其他人之上.

这可能使用Javascript吗？

这个古老的问题......为什么地狱没有一个位于闪光对象上的div在z-index上保持最佳状态.我过去找到了答案,但已经很久了,我似乎无法得到答案.我的flash电影是在左边的div中:

<div id="flash">
<object width="614" height="289">
<param name="movie" value="images/75.swf">
<param name="wmode" value="transparent">
<embed src="images/75.swf" width="614" height="289" wmode"transparent">
</embed>
</object>
</div>

我需要在顶部的div的css是:

.menu ul li:hover ul li a:hover {
background:#5a3f2d;
color:#FFF;
z-index: 9999;

我无法让它显示在ie6或ie8中的flash电影之上.我知道这是老学校,但我很沮丧!我的导航div需要有绝对位置吗？这是为什么它不起作用？

示例在这里.将鼠标悬停在右侧的第一个链接上:"CUSTOMER SERVICE"

谢谢大家:)

嘿.我的下拉菜单和iframe有一个相当令人费解的问题.

我在下拉菜单中应用了z-index为1000,但是包含youtube视频的iframe仍显示在菜单上方.请在下方查看(查看"短代码"菜单):

http://www.matthewruddy.com/demo/?page_id=765

我无法弄清楚为什么会这样.谁能帮我吗？这是CSS,如果它有帮助:

#jquery-dropdown {
position: absolute;
bottom: 0;
right: 10px;
}

#jquery-dropdown ul {
margin: 0;
padding: 0;
list-style: none;
}

#jquery-dropdown ul li {
margin: 0;
padding: 15px 10px 15px 10px;
position: relative;
float: left;
}

#jquery-dropdown ul li a {
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
color: #707070;
outline: none;
}

#jquery-dropdown ul li ul {
position: absolute;
left: -10px;
top: 46px;
display: none;
background: #f4f4f4;
border: 1px solid #e1e1e1;
border-top: none;
z-index: 1000; …

每当我尝试在网页中使用z-index来改变堆叠重叠div的顺序时,我似乎遇到了一个问题,即被迫降低的div对鼠标事件没有反应.

在我目前的情况下,我有:

<div class="leftcolumn">
<div class="leftbar"></div> <!-- a 95px wide bar on the left -->
...
<h3>header</h3> <!-- a little header sitting inside the leftbar
...
</div>

默认情况下,h3没有显示 - 它隐藏在左侧栏后面.如果我添加z-index:5; 到了H3,它仍然没有显示出来.

所以我在左栏添加了z-index:-1.现在它隐藏在左栏后面 - 但至少h3显示.

所以我在左栏添加了z-index:-2.现在一切看起来都正确 - 但你不能点击左栏内的任何东西.鼠标光标不会从箭头改变.

我在Chrome和Firefox中都得到了这种确切的行为.IE7根本不显示左栏,但至少可以点击.

那么,我是否误解了z-index,或者这里的FF和Chrome都存在错误？z-index可以有效地用于这种东西,还是我必须找到另一种方式？

(我可以更改HTML,但越少越好.)

基本上标题说明了一切 - 为什么jQuery .animate({opacity:0})也改变了z-index？

你知道怎么解决吗？

编辑:
链接到示例:http://jsfiddle.net/4vUc7/

谢谢.

我有一个日历/表格,当你悬停在每一天我们有一个小弹出窗口,绝对位于每个单元格下方.

为了完成这项工作,我<div style="relative" />在每个单元格中添加了一个.在FF中正常工作,但是当你在IE中将鼠标悬停在它上面时,z-index被忽略了.

我已经尝试了所有可以让它在IE 7 + 8中运行的黑客攻击.

我正在开发一个完全基于CSS的网站,需要z-index多次使用,价值从高-10000到高50000.

使用z-index量是否会显着增加受支持的浏览器渲染网页所需的时间？被z-index认为是一种良好的做法还是其他替代方案要么(1)更快地呈现和/或(2)更普遍可接受？

我有一组geoJSON点,并且它们附有相应的标签.

var points = L.geoJson (null, {
    onEachFeature: function (feature, layer) {
        layer.options.riseOnHover=true; //tried adding this
        layer.options.riseOffset=9999; //as well as this
        layer.bindLabel(feature.properties["name"], {className: 'map-label'});
        L.setOptions(layer, {riseOnHover: true}); //this as well
    }
});

这是遍历JSON文件中每个功能并创建一组点的代码.现在,将标记添加到地图的实际功能如下:

var addJsonMarkers = function() {
    map.removeLayer(markers);
    points.clearLayers();

    markers = new L.layerGroup();
    points.addData(dataJson);
    markers.addLayer(points);

    map.addLayer(markers);

    return false;
};

我遇到的问题是无论我尝试添加什么(你可以看到我的评论),标签总是在标记后面,这不是预期的行为.

我希望标签能够在它之上.我试图手动更改z-index的map-label类,以及与众多的解决方案,riseOnHover这似乎是这种情况的解决方案,但唱片公司仍落后.有谁看到我做错了什么？

完整的代码可以在这里看到

我的网站重新设计遇到了一些问题，案例研究中有一部分目标是粘性的，一旦你传递了一张图像，目标就会被完成。因为我使用的是全角图像，所以我希望目标部分位于下方，当您滚动时再次看到它，目标已经交叉，它在 chrome 和 firefox 上效果很好，但在 safari 上效果不佳。这很奇怪，因为当我使用 Web 检查器时，Safari 中的元素会表现得像它应该的那样，并且它位于图像下方。

有人知道会发生什么吗？

示例链接