标签: z-index

网页中Java Applet的一个众所周知的问题是浏览器会忽略applet标记的z-index与页面中的其他组件.无论你如何在页面中定位和z-index元素,applet都会在所有内容之上绘制自己.

有一种解决方法,称为iframe垫片,如下所述:http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/.

但是,此解决方法在Windows中的Safari 3或4中不起作用(对于Mac,假设相同).

有没有人知道在Safari中使用它的方法？

有没有人有关于如何迫使Sun解决潜在问题的想法,以便我们可以避免笨拙的垫片？这是关于该问题的错误报告,http://bugs.sun.com/bugdatabase/view_bug.do？bad_id = 6646289,注意它已经开放了一年,但是其他错误报告可以追溯到很多年.

这太令人沮丧了,难道孙不明白这是将Java作为在浏览器中做一些很酷的东西的边缘化的事情吗？我爱你Java,但你没有帮助你的情况......

示例代码,所以我可以开始解释这个问题:

<div style="z-index:5">5</div>
<div style="z-index:2">2</div>
<div style="z-index:1">1</div>
<div style="z-index:4">4</div>
<div style="z-index:3">3</div>

(z-index值无关紧要,它们的顺序甚至更少.只是示例代码)

问题:我想选择(使用CSS或JS和jQuery)具有最高z-index值的DIV.在上面的例子中,我想选择第一个,因为它的z-index 5高于所有其他的z-index.

有没有办法做到这一点？额外信息:我正在使用jQuery + jQuery UI编写一个Simple Window Manager,z-index由.draggable中的stack选项指定.我似乎无法找到一种方法让jQuery将最后一个被拖动的元素分配给一个类,所以我将采用最高的z-index方式.有什么帮助吗？谢谢.

如果我在枚举窗口Application.Current.Windows,我怎么能知道,对于任何两个窗口,哪一个"更接近"(即具有更大的z-index)？

或者,换句话说,我怎样才能通过z-index对这些窗口进行排序？

我的页面上有一个jQuery UI滑块,它通过下拉菜单突出显示.

有没有办法调整其z-index或者它是否需要成为页面上最顶层的元素？

我有以下div元素:

<div id="banner1">   
    <div id="whiteout"></div>
    <div id="banner2"></div>    
</div>

我需要:'whiteout'元素直接出现在'banner1'和'banner2'之上,并且在所有浏览器中显示相同的内容(目前Firefox和IE似乎很难正确地显示它,即使'顶部' 'css属性是以像素为单位) - 或者,有人可以告诉我如何在彼此之间显示2个相对div吗？

目前,我的css如下:

div#banner1 {    
    width: 100%;
    height: 140px;
    background-image: url( "images/banner/1.png" );
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-collapse: collapse;    
}

div#banner2 {   
    width: 100%;
    height: 140px;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-collapse: collapse;    
}

div#whiteout {    
    border: 1px solid black;
    width: 500px;
    height: 140px;
    background-image: url( "images/whiteout.png" );
    background-position: left center;
    background-repeat: no-repeat;
    border-collapse: collapse;
    position: absolute;
    z-index: 1;
    display: block;
    top: 50px; …

在下面的jquery函数中,z-index在IE7中不起作用,请帮帮我

<script>
$(function() {
    $('span').hover(function() {

        $(this).stop().css({                      
            'float': 'left',
        'z-index':'15'
        }).animate({
            marginTop: '0px',
            marginLeft: '0px',            
            width: '200px',
            height: '125px',
            padding: '0px'

        }, 700, 'swing');


    }, function() {

        $(this).stop().css({            
            'border': '0px',
            'z-index':'10'
        }).fadeIn('slow').animate({
            marginTop: '0px',
            marginLeft: '0px',            
            width: '40px',
            height: '13px'            
        }, 700, 'swing');


    });
});

</script>

非常感谢.我是jquery的新手.

我有一个新的网站,左上角有一个女人的形象.图像处于完美的位置,但我不能让图像的上半部分位于其他图层之上.这肯定是一个z指数问题.我尝试了所有可能的组合,以显示图像的上半部分.没运气.

你能告诉我为什么女人的上半部分不会露面吗？我该如何解决？

您可以在此处访问该页面:http: //i-treadmillreviews.com/

此外,我正在FF和Chrome中构建此站点.我现在不关心它在IE中的工作原理.我会做IE调整作为最后一件事.所以,不要告诉我它在IE中有效或不起作用,除非你当然是比尔盖茨,在这种情况下我有一些强有力的话要与你分享.

大家.我需要2个绝对定位的textarea元素,一个放在另一个上面.这是我的样本:

<div>
  <textarea id="txt1" style="position:absolute; top:0; left:0;z-index:0;background:none;">some text</textarea>
  <textarea id="txt2" style="position:absolute; top:0; left:0;z-index:1;background:none;"></textarea>
</div>

我期待txt1在txt2之下.这种情况发生在FF和Chrome中.但是在IE(在8和9中测试)中,txt1是可点击的并且变得焦点.

有谁知道,如何管理这个？

提前致谢!

我的移动网络应用程序底部有一个工具栏.我希望能够上下拖动此工具栏,显示其下方的内容.我希望能够通过使用HTML/CSS简单地完成此操作,而不必使用触摸/滚动事件或移动触摸/滚动库.

我试图通过将主要webapp顶部的滚动元素与工具栏及其底部的内容重叠来实现此目的.我给这个元素一个z-index比主要内容更低的元素,这样它就不会阻止用户与主要内容进行交互,并且工具栏及其内容更高,z-index以便可以看到和拉出/向上滚动.

我创建了一个jsFiddle,它在桌面版和Android版Chrome中都有正确的行为.我可以用手指向上拖动工具栏,或者用光标在其上滚动:

不幸的是,工具栏没有出现在Android浏览器中(在4.1和4.2上测试过).

但是,当我按下工具栏应该向上并向上拖动时,它不会滚动页面,直到我将手指移动到足以将工具栏一直向上滚动(如果它可见).这是滚动工具栏在Chrome中的工作方式,并指示工具栏在Android浏览器中正确滚动.它只是不可见.

<div id="main-content"></div>
<div id="scroller">
    <div id="wrapper">
        <div id="toolbar-and-content">
            <div id="toolbar">Toolbar</div>
            <div id="toolbar-content">Toolbar content</div>
        </div>
    </div>
</div>

#main-content {
    position:relative;
    width:100%;
    height:300px;
    background-color:green;
    z-index:1;
}
#scroller {
    position:absolute;
    top:0;
    width:100%;
    height:300px;
    overflow:auto;
}
#wrapper {
    position:relative;
    width:100%;
    height:500px;
}
#toolbar-and-content {
    position:absolute;
    bottom:0;
    width:100%;
    height:250px;
    z-index:2;
}
#toolbar {
    width:100%;
    height:49px;
    border-bottom:1px solid black;
    background-color:red;
}
#toolbar-content {
    width:100%;
    height:200px;
    background-color:orange;
}

我认为它在Android浏览器上不起作用,因为它决定忽略工具栏的更高z-index,因为它在一个较低的元素中z-index.

无论哪种方式,有没有人知道我怎么能够改变它,以便它可以在Android浏览器上工作,和/或是否有其他布局方案,我可以用来实现我想通过只有HTML/CSS？

我有一个longlistselector与我在这个longlistselector中添加的某些图像.我还更改了此图像的边距以使图像上下移动等等.但我想把这张图片放在这个longlistselector的另一张图片的前面.我尝试过使用Canvas.Zindex.我已经尝试在网格级别,图像级别和longlistselector的顶层设置它.()但它仍然无效.有人有想法吗？您可以在下面找到我的代码:

  <phone:LongListSelector 

            x:Name="SouthLongListselector" 
            VerticalAlignment="Bottom"
            ItemsSource="{Binding Cards}"
            Canvas.ZIndex="{Binding Layer}"
            SelectionChanged="SouthLongListselector_SelectionChanged"   
            LayoutMode="Grid"
            GridCellSize="50,200" 
            Margin="0,0,0,-26"
            >

        <phone:LongListSelector.ItemTemplate >  
            <DataTemplate>
                <Grid
                    Background="Transparent" 
                    Margin="{Binding GridOffset}"
                    Height="150"
                    Width="110"                      
                    >
                    <!-- add image here-->
                    <Image 
                            Source="{Binding Image}"
                            >
                    </Image>

                </Grid>

            </DataTemplate>
        </phone:LongListSelector.ItemTemplate>                
    </phone:LongListSelector>

提前致谢,