我正在尝试使用z-index来分层按钮和div。该按钮显示在div的后面，而根据z-index，它应该在它的前面。这是Firebug捕获的与button＆div相关联的样式元素：
请注意，按钮的z-index为2，div的z-index为1，并且两者均为position：relative。
完整的HTML在此pastebin中。
我在2个div标签上进行了以下设置:
<div id='div1' style='position: absolute; z-index: 2;'>
</div>
<div id='div2' style='z-index: 999;'>
</div>
问题是第二个div标签包含一个不可点击的链接,这意味着intiail div标签(或DIV1)位于它之上,使我无法点击div2.
在弄乱了一段时间之后我找不到解决方法......
我一定错过了关于z-index的一些东西.看看这段代码:
var span = document.createElement('span');
span.innerHTML = '<div style="background: none repeat scroll 0px 0px' +
'#000000; opacity: 0.7; display: block; top: 0px; bottom: 0px; ' +
'left: 0px; right: 0px; position: fixed; z-index: 1;"></div>';
span.innerHTML += '<div id="fancybox-wrap" style="opacity: 1; ' +
'width: 420px; height: 200px; top: 467px; left: 481.5px; ' +
'display: block; z-index: 2; ' +
'border: 1px solid black;">Inside div</div>';
document.body.appendChild(span);
基于第二个div具有更高的z指数的事实,它应该在第一个div的顶部吗？
我有一个非常恼人的问题,那就是我的z-index不工作而div位于(在y轴上方)而不是在(在z轴上)另一个div上方.
这可能是完全明显的,但我看不出我的代码有问题.谁能发现我哪里错了？它应该是如此简单,但我感到非常沮丧,因为我找不到解决方案.
<style>
.greenleftarrow{
position: relative;
z-index:10;
display:block;
background:#fff url(./images/greenleftarrow.jpg) no-repeat;
left:10px;
top: 0px;
height:140px;
opacity:0.5;
filter:alpha(opacity=50);
}
</style>
<body id="body1" style="position: relative; z-index:-1; height: 510px;" onload="javascript:showAndroidToast('1'); inspectLang(); getDocHeight()">
<div class="greenleftarrow" id="greenleftarrow" ></div>
<div style="position: relative; z-index:-1;">body body body body</div>
</body>
如何在img元素的悬停上设置z-index？当鼠标指针位于img之外时,z-index必须为0,否则应为9.
我知道如何设置它,但不知道如何在悬停时更改它.
$('#content img').click(function () {
$(this).css("z-index", "99")
});
如何在cocos2d 1.1中设置z-index到ccDrawPoly()来在场景中的所有CCSprite上面绘制？
-(void)draw
{
CGSize screenSize = [[CCDirector sharedDirector] winSize];
glEnable(GL_LINE_SMOOTH);
glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);
glColor4ub(0, 0, 255, 255);
glLineWidth(2);
CGPoint vertices2[] = { ccp(0,0), ccp(0,screenSize.height*0.5), ccp(screenSize.width*0.5,screenSize.height*0.5), ccp(screenSize.width*0.5,0) };
ccDrawPoly(vertices2, 4, YES);
}
我正在尝试将子元素放在它的父元素后面:
<div><p>test</p></div>
我的CSS是:
div {
width: 100px;
height: 100px;
background: red;
z-index: 2;
}
div p {
position: relative;
z-index: 1;
}
该z-index的<p>是低于它的父z-index,但它显示在前面.这是为什么？
真的希望有人可以帮助z-index新手.
我正在尝试将div放在我页面上的其他内容之上:
http://www.designbyantony.com/bipf/index.html
div(你可能会看到问题)是"2015年3月6日至8日"的圆形蓝色圆圈.我希望它能恰到好处地放在其他一切之上 - 即:稍微越过导航栏并切断具有重复"拱形"设计的区域.
我尝试过使用z-index,但我显然在某处出错了.
CSS就在
http://www.designbyantony.com/bipf/styles.css
谁能帮我？
在导航中，我有一个突出的红色框。我希望该红色框与所有Divs重叠。我为其设置了一个边距，以便将其与我放入黑盒中的其他元素隔开。问题在于它的边距还会影响单独元素的子元素的布局。当我向以下部分的子元素添加负边距时，它确实重叠了，但是我希望红色框位于顶部。我使用z-index，它似乎不起作用。
这是我在Jsfiddle上的示例：http : //jsfiddle.net/1qsuvhnd/29/
的HTML
<nav>
<div id="ribbon"></div>
</nav>
<div id="context">
<div class="link"></div>
</div>
的CSS
#context {
width: auto;
padding: 20px;
height: 300px;
background-color: blue;
z-index: 1;
}
#context .link {
float: Left;
height: 260px;
width: 300px;
margin-left: -140px;
background-color: White;
z-index:1 !important;
}
nav {
width: auto;
height: 65px;
background-color: black;
z-index:99 !important;
clear:both;
}
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index= 99;
}
使用纯CSS代码,我生成了一些色带.
如果妳把一个background-color或background-image向带状的家长或HTML体,色带:after和:before border-color没有显示出于某种原因,即使有z-index: -1.
原因是background-color父母的隐藏它,但我找不到使用background-color和ribbon:after和:before border-colors之间的解决方案.
z-index ×10
css ×8
html ×6
drawing ×1
javascript ×1
jquery ×1
margin ×1
positioning ×1
sprite ×1