我有一个项目列表（由 JSTree 生成）。我想通过 :before 伪元素突出显示项目的整行，该元素已经在不同的 HTML 结构中为我工作。现在，生成的 z 索引有些混乱。目前，具有 :before 类的项目的 z-index 为 -1。如果我将其更改为 1，它将出现在所有链接的前面，但它应该是背景。无论我选择什么值，我都无法让突出显示出现在背景前面但链接后面。
这是html代码的一部分：
<div id="jlayout_west_center" class="center" style="width: 300px; height: 897px; left: 0px; top: 0px; position: absolute;">
<div id="jlayout_west_center_content" class="jlayout-panelContent jstree jstree-0 jstree-custom jstree-focused" style="width: 100%; height: 100%;">
<ul class="jstree-no-dots jstree-no-icons">
<li class="jstree-last jstree-open"><ins class="jstree-icon jstree-ocl"> </ins><a href="javascript:void(0);"><ins class="jstree-icon jstree-themeicon"> </ins>Root</a>
<ul style="">
<li class="jstree-open"><ins class="jstree-icon jstree-ocl"> </ins><a href="javascript:void(0);" class=""><ins class="jstree-icon jstree-themeicon"> </ins>Category1</a>
<ul style="">
<li class="jstree-leaf"><ins class="jstree-icon jstree-ocl"> </ins><a href="javascript:void(0);"><ins class="jstree-icon jstree-themeicon"> </ins>Item 1</a>
</li>
[...]
</ul>
</li>
<li class="jstree-last jstree-closed"><ins class="jstree-icon jstree-ocl"> </ins><a …我创建了两个兄弟 div 并在最后一个上应用了负边距，但是当我添加position: relative到第一个 div 时，它与下一个兄弟重叠：
.box {
width: 100px;
height: 100px;
}
.box-1 {
position: relative;
background: orange;
}
.box-2 {
margin-top: -50px;
background: yellowgreen;
}<div class="box box-1">box-1</div>
<div class="box box-2">box-2</div>然而，MDN表示
使用“auto”以外的 z-index 值定位（绝对或相对）将创建一个新的堆叠上下文。
所以我想这不是堆叠上下文导致重叠，你知道这是如何发生的吗？
在写关于 SO 的另一个问题的答案时，我制作了以下片段：
@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');
/* relevant CSS */
div {
position: relative;
}
div::before {
content: '';
position: absolute;
top: 0; left:0;
}
div>span {
position:relative;
z-index:0;
}
/* rest is just styling - should be irrelevant for the question */
div {
font: normal normal normal 2rem/1 'Shadows Into Light', cursive;
color: white;
text-align:center;
margin: 1rem;
padding: 1rem;
min-width: 15rem;
cursor: pointer;
}
div::before {
width: 100%;
height: 100%;
opacity: 1;
transition: opacity .3s cubic-bezier(.4,0,.2,1);
background-color: #bada55;
border-radius: …我有一个网页，其导航栏固定在顶部，页面的其余部分应在导航栏下方向上滚动。大多数元素都会在其后面滚动。并排有三幅图像。两个外部图像（img 1 和 img 3）按其应有的方式在导航栏下方滚动，但中心图像（img 2）却没有。它滚动到导航栏上方。我认为这与它的绝对位置有关，但是我怎样才能让这张图像的行为像页面上的其他所有图像一样？如果我删除绝对位置，图像将不再与其他图像对齐。如果我添加 z 索引 1，它仍然会越过导航栏，尽管导航栏的 z 索引为 300。如果我给图像的 z 索引为 -1，它会完全消失。我尝试向不同的元素添加不同的 z-index 值，但找不到有效的组合。
这是我的相关CSS：
.navigate{
overflow: hidden;
top: 0;
width: 100%;
position: fixed;
}
.toggle,
[id^=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
background-color: #ffffff;
z-index: 300;
}
nav:after {
content:"";
display:table;
clear:both;
}
.container{
width: 100%;
margin-top: 70px;
}
.spread1{
display: inline-block;
width: 100%;
padding: 20px 0px;
background-color: #0555bd;
color: #ffffff;
}
.imgHolder{
width:60%;
margin: auto;
}
.img1{
display: block;
width: 27%;
left: …完成一个照片标记练习小部件，我剩下的只是一个问题，即无法选择关闭以前制作的标签的“x”框。我确保关闭它们的代码已经工作，但由于我如何使用跟随光标的分层 div，我可能从未真正点击过它。我已经确定它也有更高的 z-index 值，但这似乎仍然不会影响这个问题。
编辑：刚刚发现另一个小问题，每当标记框变成绿色标记框时，它就会下降大约 5 个像素。是否可以简单地偏移 CSS 高度，或者您是否必须为其提供所有新参数？
$(document).bind('mousemove', function(e){
$('.tagger').css({
left: e.pageX - 55,
top: e.pageY - 55
});
});
$('#crowd').click(function(){
$('.tagging').attr('class', 'tagger');
});
$('#crowd').mouseleave(function(){
$('.tagging').attr('class', 'tagger');
});
$(document).on('click', '.tagger', function(e){
$('.tagger').attr('class', 'tagging');
});
$(document).on('click', '.tagging li', function(e){
$('.tagging .name').text($(event.target).text());
$('.tagging .xBox').removeClass('hidden');
$('.tagging').attr('class', 'tagged');
$( ".container" ).append("<div class='tagger'><div class='xBox hidden'>x</div><div class='frame'></div><div class='name'><ul><li>One</li><li>Two</li><li>Three</li><li>Fork</li><li>Fyve</li></ul></div></div>");
});
$(document).on('click', '.xBox', function(e){
$(e.target).parent().remove();
});.tagger {
top: 0px;
left: 0px;
position: absolute;
z-index: 3;
}
.tagger .frame {
position: relative;
height: 100px;
width: …我有一个嵌套的div,如下所示:
<div id="header"><div class="header-content">
<div class="button"></div>
<div id="menu"></div>
</div>
<ul>
<li></li>
</ul>
</div>
现在我的javascript代码是这样的:
<script>
$(".button").click(function(){
$("#menu").css({
position:"absolute",
zIndex:50000,
display:"block"
});
});
</script>
它在firefox中运行良好,但在IE 6和IE 7中它并不是最重要的.任何人都有这方面的经验,请帮助我!
UPDATE!
建议的答案是不正确的,我的错误.#container DIV应该有"float:left;".请验证Firefox和IE7中的HTML.你可以看到差异!
我不能让一个DIV嵌套使用的z-index显示上方的较高层次的嵌套DIV ...叠加保持在铺设即使底部嵌套DIV具有较高的z-index较低DIV嵌套...这是甚至可能在IE7中？
以下显示Firefox中绿色#overlay上方的蓝色#details,但在IE7中,蓝色#details位于绿色#overlay下方
UPDATE2:价格 :添加"z-index:99;" #container样式使得类.item div出现(在Firefox中,IE搞砸了:无论如何都不能正确显示),而它们应该在叠加下!如果没有#container z-index设置,它会在Firefox中正确显示,但不能在IE中显示....
<html>
<body>
<style type="text/css">
.item {
float:left;width:75px;height:75px;background-color:red;
}
</style>
<div id="main" style="position:relative;">
<!-- this one should overlay everything, except #details -->
<div id="overlay" style="position:absolute;
top:0px;
left:0px;
width:500px;
height:500px;
z-index:1;
background-color:green;"></div>
<div id="container" style="position:relative;float:left;">
<!-- these ones should display UNDER the overlay: so NOT visible -->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!-- this one should display above the overlay -->
<div id="details" style="position:absolute;
width:200px;
height:200px; …我花了好几个小时现在阅读IE7的问题,将Flash内容呈现在其他元素之上,特别是导航菜单(例如,这通常是下拉菜单和Flash广告横幅的问题).我已经尝试了一些建议的解决方案,但迄今为止没有一个对我有效.我将尽力解释这些情况,并对此事提出任何建议表示感谢!
更新
根据Mercator的要求,我提供了一个大型代码示例,以协助您提供任何建议.考虑下面的HTML:
<body>
<div id="page-wrap">
<div id="content-wrap">
<div id="main">
<h1>Page Title</h1>
<p>Paragraph text before video.</p>
<div class="video-container">
<script type="text/javascript">
AC_FL_RunContent('id','player','name','player','width','480','height','294','src','player','allowscriptaccess','always','allowfullscreen','true','flashvars','file=mp4/VIDEO_FILE.mp4','movie','player' ); //end AC code
</script>
<noscript>
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="480" height="294">
<param name="wmode" value="transparent" />
<param name="movie" value="player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=mp4/VIDEO_FILE.mp4" />
<embed
wmode="transparent"
type="application/x-shockwave-flash"
id="player2"
name="player2"
src="player.swf"
width="480"
height="294"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=mp4/VIDEO_FILE.mp4"
></embed>
</object>
</noscript>
</div>
<p>Paragraph after video.</p>
</div><!-- end main -->
<div id="subContent">
<p>Sub-content.</p>
</div><!-- end …我试图把一个html元素 - 我想用来关闭它 - 通过视频iframe,
试着用
#close{
position:absolute;
top:50px;
z-index:9999;
}
但它不会起作用.iframe始终位于顶部,
也尝试添加
&wmode=opaque 到URL ...但没有
你可以在这里看到/测试:http://jsfiddle.net/fdsaP/467/
知道我错过了什么??? 或者它只是不可能？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Thank you for subscribing to our newsletter!</title>
<style>
img.img {
z-index: -1;
position: absolute;
float:left;
}
.content {
position: relative;
z-index: 5;
}
</style>
</head>
<body>
<div style="width: 750px; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">
<img class="img" src="email.png" />
<div class="content">
<h1>Text<small>app</small></h1>
</div>
</div>
</body>
</html>
例如,当我将此简报发送到gmail时,将忽略z-index.我想要的是img上的文字.但它将首先渲染图像然后再渲染文本.
基本上,z-index被忽略.这可以解决,或者我不能使用z-index？