有什么区别:
z-index: auto
z-index: 0
z-index
在所有所有上述情况是一个div
包围2个div
S,div1
和div2
每一个都具有z-index
其是9
和10
分别.
封闭div
在HTML的堆叠上下文中.
我有一个案例,第三方广告正在通过我的模态窗口实现流血.我想尽可能高地提高模态叠加层的z-index,这样广告就不会显示在它上面.z-index值是否有限制?我确定它是否因浏览器而异.谁知道?
如何将元素重叠在Internet Explorer中相对定位的另一个元素上?Z-index不起作用,它总是出现在相对定位的元素后面.
我有一个透明的div元素,z-index比同一页面上的img-element更高.但是,当涉及到点击事件时,Internet Explorer就像img-element将具有更高的z值一样.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body style="margin:0;padding:0;">
<img src="7player.png" alt="7player" width="60" height="60" style="position:absolute; left: 100px; top: 100px; z-index:10" />
<div style="width:100%;height:100%;position:absolute;z-index:900;" onclick="alert('hello');"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
当点击图像时,没有任何事情发生,而应该触发div元素的click事件(例如在Chrome中工作).
是否有任何解决方法或修复我的问题?
我创建了一个带有before-pseudo元素的'header'元素.pseudeo元素必须位于父元素后面.一切都很好,直到我给'标题'一个z-index.
我想要的是:前景中的黄色"标题",背景中的红色伪元素以及黄色"标题"元素上的简单z-index为30.
header {
background: yellow;
position:relative;
height: 100px;
width: 100px;
z-index:30; /*This is the problem*/
}
header::before {
content:"Hide you behind!";
background: red;
position:absolute;
height: 100px;
width: 100px;
top:25px;
left:25px;
z-index:-1;
}
Run Code Online (Sandbox Code Playgroud)
您可以在此链接(http://jsfiddle.net/tZKDy/)上测试我的问题,并在de'header'元素上设置/删除z-index时看到问题.
请参阅jquery-ui的评论
// Ignore z-index if position is set to a value where z-index is ignored by the browser
// This makes behavior of this function consistent across browsers
// WebKit always returns auto if the element is positioned
Run Code Online (Sandbox Code Playgroud)
我看到zIndex()
如果元素是jquery,则返回0 position: static
.
位置上是否支持z-index:static?(它在Chrome中适用于我,未经过跨浏览器测试)
我使用jQuery制作一个div apear,当我点击一个按钮 - >背景应该得到0.8的不透明度,并且出现的div将允许用户让他登录 - 当我不使用z-index时,每个人都可以,但我有4个div(标题,内容,页脚和登录表格的div)标题必须有z-index:3和内容z-index:2 - 否则阴影将无法按预期工作.
使用jQuery我在包含完整边的body标签后面添加一个div - 所以我可以设置不透明度,但是我必须将form-div的z-index设置为高于具有不透明度的div的z-index - 但它不起作用.form-div的z-index是999,另一个div是5
z-index有什么变通方法吗?
我有以下弹出窗口:
但是当我将此弹出窗口移动到地图上时,它会被隐藏:
我已经尝试在我的CSS属性表上设置z-index,但这不起作用.
是否有一些HTML/CSS属性我可以设置,以便弹出,这是一个DIV,实际上总是设置在其他一切之上?
我有以下html - 无论我做什么,我似乎无法让中间div出现在顶部顶部和顶部.它位于顶部上方,但我希望底部位于中间位置,底部实际位于顶部.有任何想法吗 ?下面的Jsfiddle链接也..提前感谢!
<body>
<div>
<div id="tdiv" >Top Div</div>
<div id="connector">Middle Didv</div>
<div id="bdiv">Bottom Div </div>
</div>
</body>
#tdiv{
height:200px; border:10px dotted black ;
margin-bottom: -100px;
background:red;
}
#connector{
height:200px;border:10px solid black;
background:blue;
margin-bottom: -100px;
z-index: 21;
}
#bdiv{
border:21px dashed black;
height:200px;
z-index: 1;
background:green;
}
Run Code Online (Sandbox Code Playgroud)
在fabricjs中,我想创建一个场景,其中鼠标下的对象在z-index中上升到场景的顶部,然后一旦鼠标离开该对象,它就会返回到它所来自的z-index.一个人不能设置object.zindex(这会很好).相反,我使用的占位符对象放在旧位置的对象列表中,然后使用canvas.insertAt将旧对象放回到列表中的位置.但这不起作用.
请参阅http://jsfiddle.net/rFSEV/了解其状态.
var canvasS = new fabric.Canvas('canvasS', { renderOnAddition: false, hoverCursor: 'pointer', selection: false });
var bars = {}; //storage for bars (bar number indexed by group object)
var selectedBar = null; //selected bar (group object)
var placeholder = new fabric.Text("XXXXX", { fontSize: 12 });
//pass null or a bar
function selectBar(bar) {
if (selectedBar) {
//remove the old topmost bar and put it back in the right zindex
//PROBLEM: It doesn't go back; it stays at the …
Run Code Online (Sandbox Code Playgroud)