我正在尝试追踪z-index问题.我正在查看IE9的DOM Inspector中的页面,我无法弄明白.
我有一个z-index为10000的元素,另一个z-index为7000,但z-index 10000是在z-index 7000之下绘制的.显然在层次结构的某个地方,有些东西正在设置堆栈上下文,但我一直在层次结构中浏览,我一直无法找到它.
除了这两个元素,我所能看到的只有一个z-index集.而且没有任何不透明度值设置.我在FF5和IE9中看到了这一点,所以它不是旧的IE <7堆叠上下文错误.
任何浏览器都有一个工具可以告诉我哪个元素正在设置堆叠上下文?
谢谢.
我在同一个容器中有两个元素,第一个position: absolute
是第二个元素position: relative
.有没有办法设置绝对元素的"z-index",以便它在后台?相对定位元素应位于顶部(z层),因为它保持链接...
这是一个JSFiddle:http://jsfiddle.net/8eLJz/
绝对定位元素位于z层的顶部,我对z-index
-property 没有影响.我能做什么?
我试图使用jQuery在可拖动元素上设置z-index.你可以看到我在说什么,到目前为止我在这里:
http://jsfiddle.net/sushik/LQ4JT/1/
这是非常原始的,它有问题.关于我如何使最后点击的元素具有最高的z-index而不是将所有其余部分重置为基础的任何想法z-index
,让它们步进,所以第二个到最后点击具有第二个最高z-index
等等.
我遇到的另一个问题是它只适用于完整点击事件,但可拖动功能通过点击和按住来工作.如何在初始点击时应用该类,而不是等待释放点击的事件?
我正在使用FancyBox插件来访问我网站的一些图片.在我的一个页面上,我还有来自YouTube的嵌入式iFrame代码,用于在页面上放置视频.
在同一页面上有一个缩略图,当点击时,FancyBoxes图像.但是,嵌入的YouTube视频仍然覆盖了FancyBox图像.我做了一些z-index实验,但仍然没有运气.
即使使用z-index设置等,iFrame是否具有页面中所有元素的资历?
可能重复:
通过覆盖元素<div>传递鼠标
是否可以点击红色方块下面的链接而不用javascript?红色div不需要是可点击的.
http://jsfiddle.net/efortis/LNwHV/
#bottom{
width: 100px;
height: 100px;
background-color: orange;
}
#top{
width: 50px;
height: 50px;
position: absolute;
left:0;
top:0;
background-color: rgba(255,0,0,.5);
}
Run Code Online (Sandbox Code Playgroud) 我希望有一个内部(非窗口)对话框来询问成员输入.我希望将对话框集中放在现有的JPanel上.
我查看了分层窗格,由于在所有窗格中只有一个布局管理器(或没有布局管理器),因此它们似乎无法使用.我想我可以尝试覆盖JLayeredPane并提供自定义布局,但这似乎极端.
玻璃窗格似乎也不合适.
如何才能做到这一点?在Swing中没有可用的z索引概念吗?
http://i42.tinypic.com/30tkuvk.jpg
编辑
分层窗格不合适的原因是每层缺少布局管理器.该小组可调整大小,小组A应保持100%的面积,小组B应保持集中.
我不明白为什么,但插入的盒子阴影在我的内容之下.
这是一个例子:
div {
box-shadow:inset 0 0 10px black;
height:300px;
color:red;
}
Run Code Online (Sandbox Code Playgroud)
<div>
a
</div>
Run Code Online (Sandbox Code Playgroud)
你看到它a
位于盒子阴影的顶部.
如何让盒子阴影位于a
?
我正在尝试为我正在处理的页面设置一个简单的水平制表符结构,而且我遇到浮动div与z-index相结合的问题.
在浏览器中查看以下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#main { width: 500px; z-index: 1;}
.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 2; margin-right: -2px }
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="main">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
<br />
RIGHT …
Run Code Online (Sandbox Code Playgroud) 有没有办法在使用绝对位置时覆盖父元素的z-index继承.我希望2222 div位于0000 div之上:
<div style="background-color:green; z-index:10; position:relative">
OOOO
</div>
<div style="background-color:yellow; z-index:5; position:relative">
1111
<div style="position:absolute; background-color:red;
z-index:15; top:-8px; left:20px">
2222
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我无法更改0000或1111 div的z-index,我试图将我的2222元素相对于1111元素定位.
所以通常我们可以使用例如:获得div元素的z-Index值:
var zindex = document.getElementById('id').style.zIndex;
Run Code Online (Sandbox Code Playgroud)
我在我的代码中使用此值来执行某些操作.现在的问题是默认值,HTML代码中没有定义任何内容(甚至在外部css中定义z-Index的情况下),同样的java脚本命令也不返回任何内容.
我理解在默认情况下,浏览器通常根据元素堆栈决定渲染.但是在JavaScript中是否有任何特定的价值或方法来实现这一点,没有定义任何值?
我的意思是,通常没有任何返回意味着没有定义值.但它也发生在外部css,所以我怎么能区分这两者?