标签: z-index

如何通过z-index对Windows进行排序？

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

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

wpf z-index

Fyo*_*kin

2010 08-13

6
推荐指数

1
解决办法

6374
查看次数

如何将2个相对div放在彼此/ top css属性上不同的浏览器,css所以它们在所有浏览器中显示相同？

我有以下div元素:

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

Run Code Online (Sandbox Code Playgroud)

我需要:'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; …

Run Code Online (Sandbox Code Playgroud)

html css position z-index

Pio*_*otr

2011 04-07

6
推荐指数

1
解决办法

2万
查看次数

带有绝对定位子的jQuery UI对话框部分隐藏了溢出的子节点

我有一个标准的jQuery UI对话框.在该对话框中,我有一个自定义的jQuery UI按钮,允许我为日历事件选择一个事件类型.我正在使用jQuery UI位置实用程序来绝对定位包含可用事件类型列表的div,如图中所示.

显示事件类型div时,任何比可用空间长的内容都会在对话框的边缘消失.如果它是一个iframe,或者如果绝对定位的父级具有更高的z-index,我会期望这个.但是,jQuery UI对话框是一个简单的绝对定位div,其z-index为1002(默认值),我的widget显示事件类型的div是一个绝对定位的div,其z-index为1003.我希望我的div在堆叠顺序中会占据更高的优先级.

我的问题是:这里发生了什么？为什么我的div被对话框的底边隐藏？

问题截图

jquery dialog jquery-ui z-index css-position

ste*_*e_c

lucky-day

6
推荐指数

1
解决办法

1005
查看次数

使用jQuery更改重叠图像z-index

我有三个矩形图像重叠在一条对角线内,第一个在左上角完全可见,第二个在中央部分隐藏在第一个,最后一个在右下角部分隐藏在第二个.我想要点击的图像在其他图像之上.我试图通过使用jQuery操纵z-index来实现这一点,但它似乎不起作用.实际上看起来jQuery甚至都没有得到认可.

这是我的测试代码:

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
    $(document).ready(function () {
        $('#launch').click(function () {
            alert('Ok');
        });

        $('.bottom-pic').click(function () {
            $(this).css('z-index' : '1');
            $('.bottom-pic').not(this).css('z-index' : '0');
        });
    });
    </script>
    <style type="text/css">
    #pictures {
        width: 650px;
        height: 300px;

        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        margin-bottom: 50px;

        position: relative;
    }

    #top {
        top: 0;
        left: 0;

        position: absolute; 
        z-index: 1;
    }

    #center {
        top: 60px; 
        left: 200px;

        position: absolute; 
        z-index: 1;
    }

    #bottom {
        top: 150px; 
        left: 400px; 

        position: absolute; 
        z-index: 0;
    }
    </style> …

Run Code Online (Sandbox Code Playgroud)

html css jquery z-index

Dav*_*ldo

lucky-day

6
推荐指数

1
解决办法

2621
查看次数

修改ItemsControl中项目的ZIndex

这是我的ItemsControl的代码,当鼠标移过时放大项目.
我没有设法增加当前缩放项目的ZIndex以将其放在其他项目上.

<ItemsControl ItemsSource="{Binding Path=Value}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=Name}"
                       RenderTransformOrigin="0.5 0.5">
                <TextBlock.Style>
                    <Style TargetType="{x:Type TextBlock}">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="RenderTransform">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX="1.5"
                                                        ScaleY="1.5" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

Run Code Online (Sandbox Code Playgroud)

我试图在触发器中直接更改ZIndex,但它不起作用.
我似乎需要更改ContentPresenter中的ZIndex,它是VisualTree中TextBlock的Parent,而不是直接在TextBlock中.

<Setter Property="Panel.ZIndex" Value="99" />

Run Code Online (Sandbox Code Playgroud)

所以我尝试在ContentPresenter中更改ZIndex,但它仍然不起作用

<ItemsControl.ItemContainerStyle>
    <Style TargetType="{x:Type ContentPresenter}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Panel.ZIndex" Value="99" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ItemsControl.ItemContainerStyle>

Run Code Online (Sandbox Code Playgroud)

有谁知道它是如何工作的？

wpf z-index itemscontrol rendertransform

Nic*_*las

2012 03-14

6
推荐指数

1
解决办法

6804
查看次数

在Android浏览器中仅使用HTML和CSS的上拉工具栏

我的移动网络应用程序底部有一个工具栏.我希望能够上下拖动此工具栏,显示其下方的内容.我希望能够通过使用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>

Run Code Online (Sandbox Code Playgroud)

#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;
}

Run Code Online (Sandbox Code Playgroud)

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

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

html android z-index overflow android-browser

Jom*_*asi

2012 12-07

6
推荐指数

1
解决办法

934
查看次数

<div>元素不是Safari Windows中的顶层

我有<div>元素显示弹出消息.我已经设置z-index:1000并添加,<iframe>但div元素仍未显示在Safari浏览器中的直播视频(嵌入插件)之上.我使用Chrome和Firefox,两者都有效,但它在Safari Windows中无法运行.

这是我在小提琴中的代码.

<BODY style="background:transparent">
<div style="position:relative; z-index:0;">
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180">
        <param name="wmode" value="transparent"></param>
        <embed height="180" width="240" align="left" src="xxxx.avi" autoplay="false" controller="true" wmode="transparent"></embed> 
    </object>

    <object>
        <param name="wmode" value="transparent"></param>
        <param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="240" height="180"></embed>
    </object>
</div>  

<div id="draggable">
    <div class="drag">
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
    </div>
    <iframe class="frame"></iframe>
</div> …

Run Code Online (Sandbox Code Playgroud)

html safari z-index always-on-top html-object

use*_*926

2013 05-02

6
推荐指数

1
解决办法

1454
查看次数

如何在longlistselector中设置datatemplate的zindex

我有一个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>

Run Code Online (Sandbox Code Playgroud)

提前致谢,

canvas z-index datatemplate longlistselector

use*_*515

lucky-day

6
推荐指数

1
解决办法

164
查看次数

反转HTML元素中子项的默认z-index

因此,规范定义了元素是按照树的顺序绘制的,用于具有相似block级别或float状态且相同的流入的非定位元素z-index.当然,这意味着在HTML标记中最后声明的那些是在顶部绘制的.但是,如果我们希望在特定容器中的任意子项中反转该顺序呢？

例如,假设float div父母中有无限数量的重叠s div:

__________________________________
|  _________________________      |
|  | samant| allis| rachael |...  |
|  |_______|______|_________|...  |
|_________________________________|

Run Code Online (Sandbox Code Playgroud)

我们希望看起来像这样:

__________________________________
|  _________________________      |
|  | samantha |lison |chael |...  |
|  |__________|______|______|...  |
|_________________________________|

Run Code Online (Sandbox Code Playgroud)

的jsfiddle

单靠css还没有办法实现这个目标吗？如果没有,使用javascript为任意子元素实现此功能的最有效和最安全的方法是什么？

先前已经询问过类似功能的问题,但不是专门用于具有任意数量的子元素的一般意义上的问题.看到这里和这里.

html javascript css z-index

Nan*_*ard

2017 05-23

6
推荐指数

2
解决办法

1185
查看次数

当为html和body隐藏overflow-x时,页脚中的链接无法点击(底部固定和后面的内容)

情况:

给出以下简化的HTML示例:

将内容放在内容后面,使其成为底部粘性
滚动到页面末尾时:页脚将从后面的内容中解开

我能够做到这一点,但是当我拥有html并且body都将它的overflow-x属性设置hidden为页脚中的那些链接时是不可点击的.

更新情况:

我知道可以将z-indices设置为#content2和footer1来使链接可以点击,但这会干扰来自页面不同部分的multizoom.js并且不是我感兴趣的.

题:

什么设置overflow-x这两个html和body在脚注中的链接呢？为什么两个元素都必须设置此属性？(如果只是其中一个省略overflow-x了链接是可点击的)

事实上,对我来说,不再设置overflow-x原始项目是没有问题的,因为它是过时样式尝试的遗留物,并且已经被删除.但我很好奇为什么会有这么奇怪的行为？

例:

/* This statement prevents the links in the footer
 * from being clickable */
html, body {
  overflow-x: hidden;
}
/* necessary statements to put footer behind content and
 * make it bottom sticky behind content */
#content …

Run Code Online (Sandbox Code Playgroud)

html css z-index footer sticky-footer

xmo*_*oex

2016 04-22

6
推荐指数

1
解决办法

792
查看次数