标签: z-index
无法使用JQuery更改z-index
我出于某种原因无法使用jQuery更改元素的zIndex.我搜索了所有这个网站和谷歌,但找不到正确的答案.我试图在点击按钮时将我的元素放在另一个div的前面.我使用了你可以在这里看到的代码.但没有奏效.
$(this).parent().css('zIndex',3000);
它在开头的元素的CSS代码:
#wall{
width:100%;
height:700px;
position: absolute;
top:500px;
background: #11c1e7;
opacity: 0.6;
z-index: 900;
}
要超出此范围的元素的CSS代码:
.port1 {
width:200px;
height:200px;
left:<?php echo rand(1,1000); ?>px;
top:-500px;
border-radius: 500px;
background:red;
position:absolute;
z-index: 10;
}
有谁知道我怎么解决这个问题？
//编辑
链接到该网站:http: //dannypostma.com/project/j.php
点击投资组合球时,两个球从空中掉落.点击时这些应该在水面前.
推荐指数
解决办法
查看次数
-transform:在悬停时导致'闪烁'的缩放
我正在开发一个目录,该目录使用css -transform属性在悬停时缩放每个'swatch'.
这是我的问题:在某些浏览器和某些网站上,当您将鼠标悬停在样本上时,会导致页面在翻转时"闪烁".我无法解决这个问题,在一个网站上它可能是Safari的独特之处,另一个网站可能只发生在Chrome中,另一个网站则完全没问题.
希望我有更多的信息,但也许其他人遇到了类似的问题.
.swatch {
-webkit-box-shadow: #EFEFEF 2px 2px 0px;
-webkit-transform: scale(1);
-webkit-transition-duration: 0.2s;
border: 1px solid white;
position: relative;
z-index: 1;
.swatch:hover {
position:relative;
z-index:10;
transition-duration: 0.2s;
transform:scale(1.8);
-webkit-transition-duration: 0.2s;
-webkit-transform:scale(1.8);
}
在删除任何z-index属性时似乎也解决了问题,但是悬停样本在其他样本后面; 这对这个项目不起作用.
任何想法都表示赞赏.
推荐指数
解决办法
查看次数
使用z-index的链接无法点击,即使它位于Firefox和IE的顶部
我试图让一个文本链接显示在部分透明的图像上,而这个图像又位于纯色背景的顶部.我希望在打印页面时打印链接文本和图像,而不是彩色背景.(这就是为什么我没有使用background-image属性)
问题是虽然链接显示在图像的顶部,并且图像根据需要显示在背景的顶部,但无法单击链接.在我看来,如果链接出现在顶部,那么它应该容易受到鼠标事件的影响......
这种情况至少发生在以下浏览器中:Firefox 6.0(Windows + Linux),Firefox 3.6(Windows)和Internet Explorer 7.
如果这是我的HTML/CSS或浏览器的问题,请有人告诉我吗？
这里有一些HTML来演示这个问题:
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="position: relative;z-index: -2; background-color:#333; height:200px;">
<img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />
<a style="padding:50px; color:#fff;z-index:0;" href="#">Can you click me?</a>
</div>
</body>
</html>
干杯!
亚历克斯
推荐指数
解决办法
查看次数
Chrome下滚动条的奇怪z-index行为
在"固定"定位元素上使用z-index CSS属性在Chrome下给我一个奇怪的行为.
当Firefox和Opera浏览器给我等待结果时,Chrome似乎不尊重z-index属性,在红色叠加层上方显示滚动条(参见代码和Fiddle bellow).
HTML:
<div class="left">
<div class="placeholder"></div>
</div>
<div class="right"></div>
<div class="overlay"></div>
CSS:
.left {
background-color: yellow;
bottom: 0;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 35%;
z-index: 10;
}
.right {
background-color: orange;
bottom: 0;
position: fixed;
right: 0;
top: 0;
width: 65%;
z-index: 20;
}
.overlay {
background-color: red;
bottom: 20%;
left: 25%;
position: fixed;
right: 25%;
top: 20%;
z-index: 40;
}
.placeholder {
height: 3000px;
}
示例:http: //jsfiddle.net/kvNFW/
操作系统:Apple Mac OS …
推荐指数
解决办法
查看次数
如何在Google Maps API v3中设置标记的z-index
任何人都可以使用Google Maps API(第3版)解释用于设置标记的z-index的确切语法吗？
javascript maps z-index google-maps-api-3 google-maps-markers
推荐指数
解决办法
查看次数
覆盖CSS Z-Index堆叠上下文
我试图覆盖/忽略元素的堆叠上下文,以便它可以相对于页面根位于z轴上.
然而,根据文章没有人告诉你Z-Index:
如果元素包含在堆叠顺序底部的堆叠上下文中,则无法使其出现在堆叠顺序较高的不同堆叠上下文中的另一个元素前面,即使使用z-index也是如此十亿!
可以通过以下三种方式之一在元素上形成新的堆叠上下文:
- 当元素是文档的根元素(元素)时
- 当元素具有静态以外的位置值和除auto之外的z-index值时
- 当元素的不透明度值小于1时
使用以下示例:
.red, .green, .blue { position: absolute; }
.red { background: red; }
.green { background: green; }
.blue { background: blue; }<div><span class="red">Red</span></div>
<div><span class="green">Green</span></div>
<div><span class="blue">Blue</span></div>如果第一个div给出opacity:.99;,(这将创建一个新的堆叠内容的第一个节点上),那么,即使如果.red有z-index:1,它还是会被放置在其它元件后面,因为它只是呈现为堆栈内的最高元件.
在jsFiddle工作演示
看起来像这样:
问:有没有办法让元素忽略其任何父元素的堆栈上下文,并要求相对于页面的原始堆栈上下文定位？
推荐指数
解决办法
查看次数
生成内容的z-index IE8错误:after
这是IE8中的已知错误,请查看此处的最后一个错误:http:
//nicolasgallagher.com/css-typography-experiment/demo/bugs.html
现在,玩一个简单的例子我发现了这个(用IE8测试它):http:
//jsfiddle.net/AjCPM/
<div id="target">
<div>div</div>
</div>
#target {
position: relative;
width: 200px;
height: 200px;
z-index: 1;
}
#target>div{
background: red; width: 200px; height: 200px;
position: relative;
z-index: 0;
}
#target:before {
top: 0; left: 10%; width: 100%; height: 100%; background: cyan;
content: "after";
position: absolute;
z-index: 10;
}
IE8渲染红色矩形下方的青色矩形(:after),即使它具有较低的z-index.
现在是棘手的部分:
将#target> div的z-index从0更改为-1并且voilá!它解决了!
所以我现在使用大量的z-index解决了我的问题:-1;
但我对此感到不安全.
你知道更好的解决方案吗？
我正在使用:在伪元素之后,因为我有一个产品列表,并且我想在项目具有"已售出"类时添加图像.
我可以在服务器或JS中创建一个新的html元素,但我认为使用:after是正确的语义解决方案.
问题是我有点偏执:现在伪元素之后,你认为最好避免它吗？
推荐指数
解决办法
查看次数
在iOS设备上滚动时,元素的z-index不起作用
我的布局相当简单,一个重复的背景元素,一些垂直空间(道路)和一些水平桥梁和一个小车,当你滚动时应该在它们下面开车.
在我的Mac上一切正常,但在iOS设备上 - 我的测试设备是:iOS 6.1上的iPhone 4,iOS 6.1.3上的iPad 2- z-index当滚动事件处于活动状态时,它不受尊重.
这意味着,当你滚动,车子,这是position: fixed对window,是在桥上移动(具有较高的z-index比"汽车"),而不是z-index使桥式更高,因为它应该是在非iOS的浏览器,其让车开到桥下.
这似乎是一个简单的分层问题,但即使有一个非常简化的测试用例,这个bug仍然很明显.
测试用例:http ://plnkr.co/EAE5AdJqJiuXgSsrfTWH(在iPad上全屏查看以避免与演示内容无关的iframe滚动问题)
有谁知道代码有什么问题会导致z-index滚动不活动时不起作用？
注意:这适用于Chrome for iOS和本机Mobile Safari.
以下是我在上面链接的简化测试用例上运行的代码位,以防有人在不打开演示的情况下指出修复.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="car"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
</body>
</html>
CSS:
body { …推荐指数
解决办法
查看次数
iOS不使用-webkit-overflow-scrolling来尊重z-index
问题:
在iOS上z-index,使用时会忽略可滚动区域-webkit-overflow-scrolling.如果两个-webkit-overflow-scrolling重叠的对象滚动,则滚动而不是上面显示的对象.
如何重现:
创建两个彼此重叠的元素(position: absolute例如),其中一个元素具有更高的元素z-index并添加
.selector
{
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
对他们两个.两个元素都应该具有足够的内容以便可滚动.
另外添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
到你的<head>.然后将页面添加到主屏幕并从那里启动它.
如果您然后尝试滚动上部元素,则会滚动下面的元素.
MCVE:
或者只是看看这支笔.从iOS设备启动完整版,将其添加到主屏幕并从那里启动.
环境:
使用iOS 9.1和iOS 9.3.2在iPhone 5和iPhone 6上进行测试
观察:
- 只有从主屏幕(固定应用程序)或Xamarin Webview内部启动页面/应用程序时才会出现此问题(可能与UIWebView和WKWebView有关)
- 在页面加载后更改设备方向(纵向/横向)后问题是固定的,直到重新加载页面(可能重新触发布局固定它？)
- 将较低元素更改
overflow-y为hidden通过JS确实可以解决问题,但是切换overflow会导致重新绘制导致性能问题 - 删除
height: 100%; width: 100%从html, body解决问题为好,但这些都必须设置百分比值正常工作
需要一个适当的解决方案/解决方法来解决这个问题,而不会造成任何麻烦的副作用.还要理解为什么会发生这种情况.
推荐指数
解决办法
查看次数
z-index是否指定了未定位的Flex项的堆栈级别？
在CSS 2.1中,z-index仅适用于定位元素,并指定两个不同的东西:
- 当前堆叠上下文中框的堆栈级别.
- 框是否建立堆叠上下文.
但Flexbox说:
柔性物品油漆完全一样直列块[CSS21] ,不同的是
order改性的文档顺序代替原始文档顺序的使用,并且z-index比其它值auto创建一个堆叠内容即使position是static.
然后,与CSS2.1不同,z-index在未定位的flex项上设置为某个整数会创建堆叠上下文.
但是,我没有看到任何应该是此堆叠上下文的堆栈级别的定义.
类似的情况是opacity,它也可以在非定位元素上创建堆叠上下文.但在这种情况下,堆栈级别被正确指定为0:
如果未定位不透明度小于1的元素,则实现必须在其父堆叠上下文中以相同的堆叠顺序绘制它创建的层,如果它是带有
z-index: 0和的定位元素,则使用该堆叠顺序opacity: 1.
在我看来,这些选择是合理的:
- 堆栈级别是指定的值
z-index - 堆栈级别为0
- flex项目将其后代包装在堆叠上下文中,以便它们被绘制在一起,但是flex项目本身被绘制为正常的流入非定位元素(就好像它没有建立堆叠上下文一样).
根据以下测试,Firefox和Chrome都是第一个选择.
.container {
display: flex;
padding-left: 20px;
}
.item {
padding: 20px;
background: #ffa;
align-self: flex-start;
margin-left: -20px;
}
.item:nth-child(even) {
background: #aff;
margin-top: 40px;
}
.za::after{ content: 'z-index: auto'; }
.z0 { z-index: 0; } .z0::after{ content: …推荐指数
解决办法
查看次数