根据标题,似乎只有Chrome没有播放.请注意,无法单击屏幕左侧部分的表单字段.这仅在某些页面上发生(例如"联系"页面).似乎#left_outer div覆盖了内容.当我通过Firebug或Chrome的开发工具编辑css时,它可以工作,当我编辑实际的css并刷新时,它没有.
有任何想法吗?
链接:
谢谢!
我注意到当调用setLayout:animated
a UICollectionView
在两个布局之间切换时,当前可见的单元格不符合zIndex
它的布局属性已被设置layoutAttributesForItemAtIndexPath:
.
例如,如果我有一个UICollectionView
with UICollectionViewFlowLayout
,则将其设置minimumLineSpacing
为负数,以便单元格重叠,然后zIndex
在每个单元格上设置一个高于前一个单元格的单元格,然后看起来好像单元格从下往上堆叠.
但是,如果我将布局设置为另一个布局然后返回到原始布局,则会中断.就好像当前可见的单元格不会监听zIndex并放置在其他单元格的顶部.如果我在屏幕外滚动单元格然后重新打开它就在正确的位置.
我想使用jQuery触发元素的悬停事件,但是我使用z-index在元素上放置了一个半透明的png.有没有办法告诉jQuery忽略png并触发下面元素的悬停事件?
基本上,"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) 我发现最新版本的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
如果有多个对话框,如何控制订单?
我在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,行为是一样的.如果我这个问题不存在:
position: absolute;
从兄弟姐妹中删除.on-top
(即.below
)overflow: hidden;
从中移除.content
.on-top
,则将其放在文档流程中的视频标记之后(但是当然,由于项目的具体原因,这些变通办法在现实中都不适用于我.我也不能给视频元素一个负面的z-index,我需要使用overflow: hidden;
.)
来自社区的建议解决方法(谢谢!)
overflow: hidden;
(我无法删除overflow: hidden;
)浏览器
我在Chrome(Mac)和Safari(Mac)中看到了这个问题.
更新1
似乎这个错误报告几乎涵盖了我的问题.但是,它没有为它提供修复.
更新2
我通过提供解决这个问题的方法回答了我自己的问题.
更新3
有许多答案可以修改z-index
视频或添加translateZ
到.on-top
元素.演示已经表明这两种方法都可以解决这个问题.但是,由于我的HTML结构是可视化HTML编辑器的输出(长篇故事......),我不知道它们将是什么元素,或者它们应该位于视频的前面,下面还是旁边.因此,我正在寻找一种解决方案,不需要更改缩放元素内的单个元素.
我有一个问题,我无法弄清楚如何纠正这个问题.我想要的是"红色框"在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) 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学习,他们对此的教训非常混乱!:(
非常感谢提前!
我需要在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) 我有一个<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)