标签: z-index

简而言之,我需要在我的java应用程序中有一个背景图像,并且在某些事件中,在该图像之上创建一些其他图形.

我以为我会使用JPanel来绘制背景图像,将它添加到我的JFrame程序的开头,然后在某些事件的基础上添加其他JPanel.问题是Swing给JPanels添加了第一个最高的Z索引,所以应该是我的背景显示在一切之上.

有没有办法控制JPanels的Z索引/顺序,还是我完全错了？

是否可以使用ActionScript 3在Flash中排列(z)对象的顺序？

例如,我在给定图层上有3个符号实例,我想执行相当于"Bring to Front","Bring Forward"和/或目标某个z位置.

这个古老的问题......为什么地狱没有一个位于闪光对象上的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"

谢谢大家:)

有许多GWT DialogBox',第一个始终保持在底部,新的创建在顶部.我想要获得的是一种在单击时将其中一个对话框置于顶部的方法.我没有找到GWT方法来处理深度(与CSS标签相关z-index但缺少一些文档).

解释这个行为:

<div style="z-index: 1"></div>
<div></div>
<div></div>
<div></div>

div {
   position: relative;
   background: red;
   width: 100px;
   height: 100px;    
}

div:before {
    position: absolute;
    background: blue;
    width: 100px;
    height: 100px;  
    z-index: -1;
    content: "";
    left: -5px;
    top: -5px;
}

http://jsfiddle.net/2VexH/2/

唯一不同的是第一个div有z-index:1集.

我遇到了一个非常烦人的错误,似乎只发生在Windows和OS X上:父级具有固定位置的元素的z-index在Chrome上不起作用!我将奇怪的情况转换为简单的代码:

HTML:

<div id="mask">
    &nbsp;
</div>

<div id="box">
    <div class="below-mask circle">
        should be below the mask
    </div>

    <div class="above-mask circle">
        should be above the mask
    </div>
</div>?

CSS:

body {
    font-family: Verdana;
    font-size: 9px;
    margin: 0px;
}

#box {
    position: fixed;
}

#mask {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 9998;
}

.circle {
    position: relative;
    background-color: rgba(255, 204, 0, 0.75);
    border-radius: 75px;
    line-height: 150px;
    margin: 50px;
    text-align: center; …

我试图在我的所有DIV上做一个封装,它看起来很透明(不透明度:0.6),但前面的所有内容都显得透明.

任何想法如何解决这一问题？

你可以在这里找到这样的例子:http://testing.squaretise.com/(我给了包装器(#wrap)一个红色边框,这样你就可以更容易地解释了)

以前,我认为子元素不能对其父元素的兄弟元素进行z索引,该元素具有比其父元素更高的z索引.例如,div和B是兄弟姐妹.Div A具有10的z索引,并且div B具有为5的z索引Div B具有子元素:Div C,具有9999的z-index从我的理解,div C将不被上述定位div A,因为div C的父(div B)具有较低的z-index比div A.这是正确的,除非div Bz-index为'auto'.当div B有"自动"的z-index的,这将是"0",因为它是从身体继承,div C持仓过div A,即使DIV B的z-index的实际上是LOWER比它时,它不能正常工作了.

根据CSS2规范,z-index'auto'定义为

当前堆叠上下文中生成的框的堆栈级别为0.除非是根元素,否则框不会建立新的堆叠上下文.

我无法理解" 堆叠上下文".它似乎是定义的z-index为0,默认为'auto'为0但没有堆叠上下文之间的唯一区别.进一步来说:

为什么没有堆叠内容的元素的子元素索引与堆叠上下文中的元素不同？

这是一个小提琴,它显示了z-index为0和z-index为auto之间的区别.绿色div是蓝色div的孩子,红色div是蓝色div的兄弟.

http://jsfiddle.net/c7Tvt/

我试图把蓝色方格div的角落放在橙色div下面.我尝试了所有我知道的东西: z-index不起作用,因为我的div被包裹在另一个div中,如果我打开它,我会遇到定位八个元素的麻烦.

谁能告诉我怎么做？或者如何对所有元素使用z-index？

是)我有的:

我需要的:

到目前为止我的HTML:

 body {
   background-color: #222;
   background-repeat: no-repeat;
 }
 #blueSquare {
   position: absolute;
   left: 15px;
   top: 15px;
   width: 50%;
   height: 170px;
   -webkit-transform: rotate(-45deg);
 }
 #rightTopblueSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #7ab9c2;
   opacity: .99;
 }
 #leftBottomblueSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #6baaae;
 }
 /*----------------------------------*/
 #greySquare {
   width: 50%;
   height: 170px;
   position: absolute;
   bottom: 15px;
   left: 15px;
   -webkit-transform: rotate(45deg);
 }
 #lefTopgreySquare {
   height: 100%;
   width: 50%;
   position: …

我的FabricJS应用程序出了问题.默认情况下,当我选择它时,fabricjs中的对象层跳转到顶部.

我想禁用此选项,以便活动元素的索引不会更改.这是可能的 ？