标签: z-index

谷歌浏览器不尊重z-index

根据标题,似乎只有Chrome没有播放.请注意,无法单击屏幕左侧部分的表单字段.这仅在某些页面上发生(例如"联系"页面).似乎#left_outer div覆盖了内容.当我通过Firebug或Chrome的开发工具编辑css时,它可以工作,当我编辑实际的css并刷新时,它没有.

有任何想法吗?

链接:

谢谢!

css google-chrome z-index

19
推荐指数
3
解决办法
3万
查看次数

UICollectionView setLayout:animated:不保留zIndex

我注意到当调用setLayout:animateda UICollectionView在两个布局之间切换时,当前可见的单元格不符合zIndex它的布局属性已被设置layoutAttributesForItemAtIndexPath:.

例如,如果我有一个UICollectionViewwith UICollectionViewFlowLayout,则将其设置minimumLineSpacing为负数,以便单元格重叠,然后zIndex在每个单元格上设置一个高于前一个单元格的单元格,然后看起来好像单元格从下往上堆叠.

但是,如果我将布局设置为另一个布局然后返回到原始布局,则会中断.就好像当前可见的单元格不会监听zIndex并放置在其他单元格的顶部.如果我在屏幕外滚动单元格然后重新打开它就在正确的位置.

z-index ios uicollectionview

19
推荐指数
4
解决办法
7667
查看次数

由于z-index导致jQuery悬停问题

我想使用jQuery触发元素的悬停事件,但是我使用z-index在元素上放置了一个半透明的png.有没有办法告诉jQuery忽略png并触发下面元素的悬停事件?

css jquery events z-index hover

18
推荐指数
1
解决办法
9634
查看次数

CSS3 Transitions - 如何延迟z-index属性的重置?

基本上,"highlight"类通过mouseenter上的javascript动态添加到具有"edge"类的元素.在mouseleave上删除了突出显示类.我想转换这些元素的边框颜色.但是,此"突出显示"类也会修改堆栈顺序.我希望在转换开始之前(在mouseenter上)在所有突出显示的边上设置z-index为1,并且我希望在转换完成后移除z-index为1(在mouseleave上).目前,在删除"highlight"类后立即重置z-index属性.

基本设置:

.edge {

    border-color: hsl(0, 0%, 40%);
    border-style: solid;
    border-width: (set appropriately in another selector);

    transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;

    transition-property: border-color;
    -moz-transition-property: border-color;
    -o-transition-property: border-color;
    -webkit-transition-property: border-color;
}

.edge.highlight {
    border-color: hsl(0, 0%, 85%);
    z-index: 1;
}
Run Code Online (Sandbox Code Playgroud)

第一次尝试(显然延迟修复了一端的时间并将其混淆在另一端):

.edge {
    border-color: hsl(0, 0%, 40%);
    border-style: solid;
    border-width: (set appropriately in another selector);

    transition-duration: 1s, 0;
    -moz-transition-duration: 1s, 0;
    -o-transition-duration: 1s, 0;
    -webkit-transition-duration: 1s, 0;

    transition-delay: 0, 1s;
    -moz-transition-delay: 0, 1s;
    -o-transition-delay: 0, 1s;
    -webkit-transition-delay: 0, …
Run Code Online (Sandbox Code Playgroud)

javascript css z-index css3 css-transitions

18
推荐指数
2
解决办法
1万
查看次数

为什么jQuery UI 1.10删除了jquery对话框zIndex选项?

我发现最新版本的jQuery UI(1.10)删除了该zIndex选项.它在jQuery网站上得到了证实.

这真让我震惊.请想一想:

当我们有一个jqgrid,并使用editrow()addrow()打开一个编辑对话框来编辑某些东西时,里面有很多字段,其中一些有自定义的事件,比如,当你点击它时,它会显示另一个jQuery对话框来显示一些树视图项目可供选择.

在jQuery UI 1.9(包含)下,您可以将jQuery对话框的zIndex选项设置为大于jqgrid编辑对话框(jqgrid编辑对话框支持集zIndex),因此jQuery对话框始终可用,可以查看和使用.

在jQuery UI 1.10下,您无法设置zIndex,因此jQuery对话框始终位于jqgrid编辑对话框的后面.

我觉得这样的场景非常普遍.

为什么jQuery UI 1.10删除了jQuery对话框zIndex选项?z-index如果有多个对话框,如何控制订单?

jquery dialog z-index

18
推荐指数
2
解决办法
2万
查看次数

缩放元素中的视频和z-index:一些div消失

我在Chrome和Safari中有一些奇怪的行为.我有一个scaled(transform: scale())容器,里面有视频和其他元素.在一些缩放中,具有高z指数的绝对定位元素消失并且不再返回.

我怎样才能解决这个问题?请注意,我不能给视频元素一个负z-index,我需要使用overflow: hidden;.

我做了一个例子,可以向上和向下扩展最外面的容器.在特定比例值处,具有类.on-top(和文本"I should always be on top.")的元素消失.当再次缩小时,它会突然出现.

链接到exmaple:https://jsfiddle.net/iafiawik/Lcox1ecc/

在此输入图像描述

结论

  • 看起来元素的大小很重要.我做得越大,它消失之前的比例值就越大.
  • 我还测试了transform: scale(1.4)直接在元素上设置CSS,行为是一样的.

如果我这个问题不存在:

  • 用div替换视频标签
  • position: absolute;从兄弟姐妹中删除.on-top(即.below)
  • overflow: hidden;从中移除.content
  • 如果我移动.on-top,则将其放在文档流程中的视频标记之后

(但是当然,由于项目的具体原因,这些变通办法在现实中都不适用于我.我也不能给视频元素一个负面的z-index,我需要使用overflow: hidden;.)

来自社区的建议解决方法(谢谢!)

  • 为视频标记提供负z-index(不能这样做,因为我有时会在视频后面放置元素)
  • 删除overflow: hidden;(我无法删除overflow: hidden;)

浏览器

我在Chrome(Mac)和Safari(Mac)中看到了这个问题.


更新1

似乎这个错误报告几乎涵盖了我的问题.但是,它没有为它提供修复.

更新2

我通过提供解决这个问题的方法回答了我自己的问题.

更新3

有许多答案可以修改z-index视频添加translateZ.on-top元素.演示已经表明这两种方法都可以解决这个问题.但是,由于我的HTML结构是可视化HTML编辑器的输出(长篇故事......),我不知道它们将是什么元素,或者它们应该位于视频的前面,下面还是旁边.因此,我正在寻找一种解决方案,不需要更改缩放元素内的单个元素.

javascript css google-chrome z-index scaletransform

18
推荐指数
3
解决办法
796
查看次数

如何"z-index"使菜单始终位于内容之上

我有一个问题,我无法弄清楚如何纠正这个问题.我想要的是"红色框"在z-index 2中保留在页面顶部,而背景上的所有内容都保留在索引1上但不知何故这个代码"折叠"了图层.如果有人可以帮助我,我真的很感激.对不起我的英语不好.提前致谢.

<html>
<head>
<title></title>
<style type="text/css">

body { margin: 0; }

#container {
    position: absolute;
    float: right;
    z-index: 1;

}

.left1 { 
    background-color: blue;
    height: 50px;
    width: 100%;

}
.left2 { 
    background-color: green;
    height: 50px;
    width: 100%;

}


#right { 
    background-color: red;
    height: 300px;
    width: 300px;
    float:right;
    z-index: 999999;
    margin-top: 0px;
    position: relative;
}




</style>
</head>

<body>

<div id="container"></div>
<div class="left1">LEFT BLUE</div>
<div class="left2">LEFT GREEN</div>
</div>
<div id="right">RIGHT RED</div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

css z-index

17
推荐指数
2
解决办法
14万
查看次数

z-index如何真正起作用?

z-index实际上如何运作?它是否在没有指定的元素上起作用position?它是否支持具有指定的元素(即使它们在顶部)position

数字必须像这样负面吗?

<div style='z-index:-2;'>below</div>
<div style='z-index:-1;'>less below</div>
<div style='z-index:0;'>on top</div>
Run Code Online (Sandbox Code Playgroud)

?或不?所有正数(增加值)是否会以最后一个位于顶部,中间位于中间,第一个位于底部?

我正在向W3Schools学习,他们对此的教训非常混乱!:(

非常感谢提前!

html css z-index

17
推荐指数
2
解决办法
2万
查看次数

相对布局中的z-index

我需要在RelativeLayout中的Button上方放置一个TextView.但它不起作用:TextView总是在Button下,即使我在按钮之前移动它.我也尝试过bringChildToFront()在前面移动textview的功能,但没有运气.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rlBottom"
android:layout_width="fill_parent"
android:layout_height="match_parent">

<Button
    android:id="@+id/bVio"
    android:layout_width="wrap_content"
    android:layout_height="50dip"
    android:layout_alignParentLeft="true"
    android:text="VIO"></Button>

    <TextView
        android:id="@+id/bVio_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/bVio"
        android:layout_marginTop="6dip"
        android:layout_marginRight="6dip"
        android:text="00"
        android:textSize="15dip"
        android:textColor="#FF0000"/>
</RelativeLayout>
Run Code Online (Sandbox Code Playgroud)

android z-index android-relativelayout

17
推荐指数
2
解决办法
2万
查看次数

如何在用户单击其子元素时阻止父点击事件?AngularJS

我有一个<div>,ng-click但这<div>有一个子元素与还ng-click指令.问题是,子元素上click事件也会触发父元素click事件 .

当我点击他的孩子时,如何阻止父点击事件?

这是一个jsfiddle来说明我的情况.

预先感谢您的帮助.

编辑

这是我的代码:

<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
    <div id="child" ng-click="childClick()"></div>

    <p ng-bind="elem"></p>
</div>

<div><p style="text-align:center" ng-bind="childElem"></p></div>
</body>

<script>
function TestController($scope) {
    $scope.parentClick = function() {
        $scope.elem = 'Parent';
    }

    var i = 1;
    $scope.childClick = function() {
        $scope.elem = 'Child';
        $scope.childElem = 'Child event triggered x' + i;
        i++;
    }
}
</script>
Run Code Online (Sandbox Code Playgroud)

javascript z-index angularjs

17
推荐指数
3
解决办法
1万
查看次数