标签: z-index
IE 9问题中<canvas>的z-index
我遇到一个奇怪的问题,z的索引为a <canvas>; 不能在IE9中渲染为正确的图层.请看看这个jsfiddle:
http://jsfiddle.net/xacto/MTUHX/
这是它应该如何工作:
- 红色方框应该是超链接的,并且是顶层.
- 青色
<canvas>应该是下一层. - 带绿色背景的方框应位于底部.
这适用于Chrome,Firefox甚至IE8.但是,在IE9中,青色<canvas>是顶层,红色轮廓的超链接框不再可点击,除了底部的小区域,它不覆盖青色<canvas>.
这是另一件值得注意的事情:如果你改变了<canvas>a <div>即改变了这条线:
var can = $('<canvas></canvas>').css({...
至
var can = $('<div></div>').css({...
它也适用于IE9.这让我相信这是一个<canvas>相关的问题,而不仅仅是一个z指数问题.
我根据网络上的建议尝试了很多z索引组合,但似乎没有任何效果.如果有人对此有答案,我们将不胜感激.
PS有些人可能会问为什么<canvas>要通过JavaScript添加它以及为什么它被添加为第一个元素<body>.没有详细说明,使用<canvas>它的第三方应用程序要求以这种方式添加它.
推荐指数
解决办法
查看次数
css较高的z-index出现在较低的一个
我正在努力解决css上z-indexes的问题.
我有一个项目的z-index <100,另一个项目(图像)的z-index为3000(实际上要高得多).
第二个出现在第一个下面,它让我有点疯狂.我已经对这个问题进行了一些搜索,我已经读到它可能是由于没有放置位置引起的,所以我尝试了位置:固定,位置:相对,但是没有一个工作.
该网站是:www.imagine-that.be
图像必须出现在菜单右侧的右下角.您可以在菜单后面稍微看一下.
这是我尝试使用的css代码:
#menulogo {
position:fixed;
bottom:40px;
right:100px;
z-index:2000;
}
#menulogo img {
position:fixed;
bottom:40px;
right:100px;
z-index:2000;
}
我现在真的不知道应该做些什么来解决这个问题,所以任何帮助都会受到赞赏!
问候,
公园
推荐指数
解决办法
查看次数
通过实际z-index比较HTML元素
给定同一文档中的两个abitrary HTML元素A和B,如何找出哪个"更接近"用户(即如果它们重叠,哪一个模糊另一个)？
在W3C CSS规范描述堆叠内容,这符合渲染引擎应该实现.但是,我找不到在JavaScript程序,跨浏览器中访问此信息的方法.我所能读到的只是css z-index属性,本身并没有多说,因为大部分时间都设置为auto或者,即使表示为数值,也不是它实际显示方式的可靠指标(如果它们属于对于不同的statcking上下文,比较z-index是无关紧要的).
请注意,我对任意元素感兴趣:如果两个元素都在鼠标指针下方,则只有一个被认为是"悬停",所以在这种情况下我可以轻松找到最接近的元素.但是,我正在寻找一种更通用的解决方案,最好是不涉及重新实现渲染引擎已经执行的堆叠算法的解决方案.
更新:让我澄清一下这个问题背后的原因:我最近解决了一个暴露jQuery拖放机制限制的问题 - 它在删除时不会考虑z索引,所以如果一个元素模糊了另一个,它仍然可以在"后面"的元素中执行放置操作.虽然针对OP特定案例回答了相关问题,但一般问题依然存在,而且我所知道的解决方案并不容易.
alex下面的答案很有用,但对于手头的情况还不够:拖动时,拖动的元素本身(或者更确切地说是它的帮助器)是鼠标光标下面的最顶层元素,因此elementFromPoint将返回它而不是下一个最顶层的元素,我们确实需要(解决方法: 设置光标样式,使其位于助手之外).jQuery采用的其他交集策略也不仅仅考虑了一个点,这使得确定与助手交叉的最顶层元素的任务变得复杂化.能够通过实际z-index比较(或排序)元素将使得"z-index感知"交叉模式对于一般情况是可行的.
推荐指数
解决办法
查看次数
Jquery - 调暗整个页面并淡化一个div元素
我尝试执行以下操作: - 单击一个链接,触发一个功能,显示DIV(#page-cover)调暗我的整个背景.这个div的z-index为999 - 然后我希望另一个div(#red)出现在具有更高z-index的灰色背景/ fadeup/show上
我的CSS:
#page-cover {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
z-index: 999;
top: 0;
left: 0;
}
#red {
background-color: red;
width: 100px;
height: 100px;
}
HTML
//Triggering link
<a href="#" onclick="dimBackground("Element1")">Element 1</a>
//Div to appear upon dimmed DIV
<div id="red">hejsa</div>
//Dimming DIV
<div id="page-cover"></div>
jQuery的
function dimBackground() {
$("#page-cover").css("opacity",0.6).fadeIn(300, function () {
//Attempting to set/make #red appear upon the dimmed DIV
$('#red').css('zIndex', 10000);
});
}
页面封面按照假设逐渐消失,但是我没有任何成功,#red会在之后出现.
有什么建议？
推荐指数
解决办法
查看次数
Firefox全屏视频附加DOM元素
无论我如何将DOM中的元素作为html5视频上的叠加(静态或动态),Firefox中的这些元素都不可见,尽管z-index设置为2147483647,不透明度为1和显示块.
看到2个类似的答案,在Chrome中工作,但不在FF中:
推荐指数
解决办法
查看次数
Div使用z-index除以Div
我的HTML中有以下div:
<div class="main">
<div class="bgimage"></div>
<div class="content">Text</div>
它直接在我体内.
使用以下CSS:
body {
margin: 0;
padding: 20px 0;
}
.content {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.content {
position: relative;
z-index: 1;
border: #000 thin solid;
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #000;
}
.bgimage {
position: absolute;
z-index: -1;
width: 1024px;
height: 768px;
margin-left: auto;
margin-right: auto;
background-image: url(bg1.jpg);
}
基本上,我有一个显示背景图像的Div,我将在透明度上有另一个Div.这个当前代码有效,但我的问题是当我试图从顶部取下内容div时.
当我添加margin-top:100px时,例如,也会降低图像.如果它不在同一个z-index上,我认为它不会碰它？为什么添加边距也会迫使bgimage div下降？
我也尝试用内容类来制作div的绝对位置和zindex,但是这不会居中.我该怎么解决这个问题？
推荐指数
解决办法
查看次数
改变Z-Index onclick
JavaScript noob在这里.我正在网站上工作,我正在尝试使用按钮更改一组帧的z-index.我无法让它发挥作用.
到目前为止,这就是我所拥有的.
function changeZIndex(i,id) {
document.getElementById(id).style.zIndex=i;
}
在身体里
<A HREF="#" onclick='changeZIndex(1,'aboutus')'><IMG NAME="one" SRC="button1.bmp"></A>
<A HREF="#" onclick='changeZIndex(1,'contactus')'><IMG NAME="two" SRC="button2.bmp"></A>
是的,我意识到这可能是有史以来最愚蠢的问题,答案非常明显.这是我第一次编写JavaScript,所以请放轻松我吧!:3
推荐指数
解决办法
查看次数
Canvas动态更改位图的z-index
我正在创建一个Android应用程序,在我的应用程序中,我有一个画布,我通过canvas.drawBitmap()函数绘制了大量的位图到画布.根据我的理解,这些位图上的z-index是根据它们绘制到画布的顺序设置的.我想弄清楚的是在绘制这些位图之后,如果我可以动态更改位图上的z-index以将其推到顶部？这似乎是一个非常简单的问题,但我还没有找到解决方案的运气.
推荐指数
解决办法
查看次数
用背景和z-index重叠li元素
我ul在水平视图中有一个树列表项.所有列表项都具有相同的背景图像:
我想重叠背景图像,所以它看起来像这样:
这是我的jsFiddle
CSS:
div#menu ul li{
height:30px;
display: inline;
list-style-type: none;
width: 60px;
background: url(http://i.stack.imgur.com/adwVj.jpg);
background-size: 100%;
background-repeat: no-repeat;
padding-right: 5px;
padding-left:30px;
z-index:2;
}
div#menu ul li:first-child{
padding-left:20px;
z-index:3;
}
div#menu ul li:last-child{
padding-left:35px;
margin-left:-30px
z-index:1;
}
HTML:
<div id="menu">
<ul>
<li>Account</li>
<li>Registreren</li>
<li>Winkelwagen</li>
</ul>
</div>
z-index出错了!
推荐指数
解决办法
查看次数
Z-index不适用于flex元素？
我正在尝试有两列,一个是可以扩展并与另一列重叠的菜单.但是我使用了一个flex元素来包装这些列,我的菜单扩展到了另一个元素后面,即使有更大的元素z-index.
渲染是这样的:
.main {
font-family: 'Open Sans', Helvetica, sans-serif;
display: flex;
background-color: #99baef;
}
nav {
height: 100%;
width: 8em;
background-color: black;
z-index: 1;
}
.navbox {
box-sizing: border-box;
background-color: black;
color: white;
height: 4em;
width: 100%;
text-align: center;
line-height: 4em;
border-top: 1px dotted #99baef;
transition: all 1s;
}
.navbox:hover {
width: 130%;
border-top: none;
background-color: #4a77c4;
color: black;
}
.container {
padding: 1em;
}
a {text-decoration: inherit;}<div class="main">
<div class="maincolumn">
<nav>
<a href="">
<div …推荐指数
解决办法
查看次数