标签: z-index
WPF - 在TabControl和ZIndex中重叠自定义选项卡
问题
我有一个自定义标签控件,使用与ViewModel绑定的Chrome形状标签.由于形状,边缘重叠一点.我有一个函数设置tabItem的ZIndex,TabControl_SelectionChanged它可以正常选择选项卡和拖放选项卡,但是当我通过中继命令添加或关闭选项卡时,我得到了不寻常的结果.有没有人有任何想法？
默认视图:
删除标签:
连续添加2个或更多Tab:
一次添加超过1个选项卡将不会重置其他最近添加的选项卡的zindex,因此它们会在右侧的选项卡后面,并且关闭选项卡无法正确呈现替换它的SelectedTab的ZIndex并且它显示在选项卡右侧.
用于设置ZIndex的代码
private void PrimaryTabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.Source is TabControl)
{
TabControl tabControl = sender as TabControl;
ItemContainerGenerator icg = tabControl.ItemContainerGenerator;
if (icg.Status == System.Windows.Controls.Primitives.GeneratorStatus.ContainersGenerated)
{
foreach (object o in tabControl.Items)
{
UIElement tabItem = icg.ContainerFromItem(o) as UIElement;
Panel.SetZIndex(tabItem, (o == tabControl.SelectedItem ? 100 :
90 - tabControl.Items.IndexOf(o)));
}
}
}
}
通过使用断点,我可以看到它正确地将ZIndex设置为我想要的,但布局不显示更改.我知道有些变化是有效的,因为如果它们都没有工作,那么标签边缘将被颠倒(右边的标签将被绘制在左边的标签之上).单击选项卡将正确设置所有选项卡的zindex(包括应在顶部绘制的选项卡),拖放它们以重新排列它们也可以正确渲染(删除并重新插入选项卡项).我能想到的唯一区别是我使用MVVM设计模式和添加/关闭选项卡是中继命令的按钮.
有谁知道为什么会发生这种情况以及如何解决它？
ps我尝试在我的ViewModel中设置一个ZIndex并绑定到它,但是当通过relay命令添加/删除选项卡时会发生同样的事情.
推荐指数
解决办法
查看次数
jQuery的$('#divOne').animate({zIndex:-1000},2000)不起作用？
我试过jQuery的
$('#divOne').animate({zIndex: -1000}, 2000)
对于那个z-index为1000的元素,它仍然高于其他元素？
(如果我使用firebug将其更改为-1000那么它将低于其他元素)
推荐指数
解决办法
查看次数
HTML5视频的z-index分层(ipad)
我正在使用BrightCove智能手机代码将HTML5视频标签写入页面.这段代码用视频标签替换了object标签,以便它可以在iphone和ipad上运行,仍然可以在不支持的浏览器中运行
我遇到的问题是这个动态写入标签的分层.它似乎不遵守z-index顺序,导致当有人滚过下拉列表时,我放在视频后面的视频上方的下拉菜单.
推荐指数
解决办法
查看次数
谷歌Chrome,Flash和z-index错误的behvaiour
我必须在包含flash视频的iframe上显示div.div的z-index设置为9999.但ifarame没有任何z-index.但是谷歌Chrome的闪光灯仍然存在,它在IE 7/8/9和Mozila Firefox中运行良好.
我正在使用的代码是
flash.html
<!doctype html>
<html>
<head>
<title> Flash - zIndex</title>
</head>
<body>
<div style="position : absolute;left:200px;top:200px;width:320px; height:220px;background-color:#fff;z-index:999;" >
<iframe src="blank.html" style="width:100%; height:100%;">
</iframe>
</div>
<div id="textDiv" style="position : absolute; z-index:9999; left:200px;top:200px;border: 5px solid rgb(235, 127, 0);width:300px; height:200px;background-color:#fff;overflow:auto;">
this is the text div
</div>
<div id="flashDiv" style="height: 150px;">
</div>
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/3RD_3wooRjI" frameborder="0" allowfullscreen></iframe>
</body>
</html>
blank.html
<!doctype html>
<html>
<head></head>
<body></body>
</html>
请解决这个问题.
提前致谢,
PRASHANT
注意:请不要告诉解决方案将"wmode = transparent"作为iframe src中的get参数.因为它不是这个问题的通用解决方案.
推荐指数
解决办法
查看次数
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不起作用
这个div
<div style="position: relative; z-index: 99;">123</div>
如上所示
<div style="position: fixed; z-index: 3000;">456</div>
当我在第一个div中分配z-index:98时一切都很好!如果需要,我可以提供更多代码.
推荐指数
解决办法
查看次数
解决方法/ polyfill for Android 4.0.3 Stock浏览器z-index问题
我正在寻找针对此报告中描述的z-index错误的变通方法或polyfill:http: //code.google.com/p/android/issues/detail？id = 31862
我的标记和CSS看起来与bug报告中给出的基本相同.
如果有人能给我一个如何解决这个问题的正确方向的提示,真的很棒.
推荐指数
解决办法
查看次数
ListView项目的z位置不同
是否可以使ListView中的项具有不同的z位置/索引？
我希望ListView中的一个项目始终位于我的布局中的其他视图之上.
请看我的插图:
红色条是ListView外部的另一个视图(在我的例子中是一个垂直搜索条).
我曾尝试过调用View.bringToFront()某个项目,但这根本不起作用.
有任何想法吗？
推荐指数
解决办法
查看次数
CSS转换后的元素是否具有默认的z-index？
我在这里有一个非常基本的例子,我有一个固定的标题与其他元素一个接一个地堆叠,单个元素使用转换transform: rotate(360deg).
因此,当页面滚动时,只有转换后的元素才会越过固定栏,而其他元素则不会.那么问题是变换元素有默认z-index吗？
当您使用
z-index: -1;了.transform_me它的表现正常
CSS
.fixed {
height: 30px;
background: #f00;
position: fixed;
width: 100%;
top: 0;
}
.transform_me {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
span {
display: block;
height: 100px;
}
注意:如果我们使用say
z-index: 999;作为固定div,它将被解决,但这不是我想要的.
推荐指数
解决办法
查看次数
为什么z-index不起作用？
我试图了解z-index的工作原理.为了做到这一点,我创建了一个由五个div组成的简单示例.每个人都是前一个孩子,除了第一个孩子.我的目标是使第一个div(所有其他div的父容器)显示在所有其他div之上,有效地隐藏它们.
为了实现我的目标,我已经在所有div和父div上放置了z-index属性我放了一个夸大的值100以确保它高于所有其他但它似乎没有工作.
我已经阅读了许多关于z-index的不同文档,并在Stack Overflow上阅读了大量的答案.到目前为止,我尝试了以下内容:
- 将位置属性添加到所有div.
- 向我要隐藏的div添加值为0.99的不透明度.
- 应用位置属性的不同值组合(例如,相对,固定,绝对).
尽管如此,我还没有成功地使父div出现在所有其他div之上.我究竟做错了什么？
我用我刚才描述的例子创建了一个JSFiddle:https://jsfiddle.net/y8jfdz7w/15/ .
.first {
position: absolute;
z-index: 100;
width: 500px;
height: 500px;
background-color: grey;
}
.second {
position: absolute;
z-index: 2;
width: 450px;
height: 450px;
top: 25px;
left: 25px;
background-color: orange;
opacity: 0.99;
}
.third {
position: absolute;
z-index: 3;
width: 400px;
height: 400px;
top: 25px;
left: 25px;
background-color: yellow;
opacity: 0.99;
}
.fourth {
position: absolute;
z-index: 20;
width: 350px;
height: 350px;
top: 25px;
left: 25px;
background-color: green;
opacity: …推荐指数
解决办法
查看次数
标签 统计
z-index ×10
css ×4
android ×2
css-position ×2
android-4.0-ice-cream-sandwich ×1
canvas ×1
css3 ×1
flash ×1
html5 ×1
html5-video ×1
iframe ×1
javascript ×1
jquery ×1
listview ×1
position ×1
tabcontrol ×1
tabitem ×1
wpf ×1
youtube ×1