我正在开发一个带有地图的应用程序,角落里有一个div,里面有一些东西.您可以单击此地图以在一个小窗口中显示一些信息.在某些情况下,窗口被角落里的div覆盖.
我想要相反的效果(窗口覆盖div).我认为这只是一个z索引问题,但我无法让它工作.这是在IE7和读取一点似乎z-index将无法工作,除非它在一个定位的元素内.
这些元素似乎正确定位,以使z-index正常工作,但我运气不佳.我已经玩过通过Firebug添加样式但是没有任何运气可以改变任何东西.窗口真的只是两个div,一个绝对定位一个,一个相对一个内部.
z-index是唯一可能成为问题的东西还是还有其他我不知道的东西？
有没有其他方法可以达到我想要的效果？我不能简单地通过jquery或其他东西隐藏div,因为它的一部分应该从地图上打开的窗口后面看到.
我有两个<div>相互重叠的元素,如:
-------------
| |
| A |
| |
| ------------
| | |
| | |
----| B |
| |
------------
所以我在A之后将B添加到DOM里面.内部div有一些其他html元素(图像)我应用css3d变换,但是当我这样做时它们也出现在div B的前面,我总是希望div B高于div A及其所有内容.我尝试在两个div元素上设置z-index属性,但是A中的3d变换项仍然呈现在div B的ontop上.
任何方式总是让B出现在A面前,它的内容是什么？
谢谢马克.
我有这种风格:
header{
width:400px;
min-height:640px;
background:#9B9B76;
float:left;
z-index:1000; /*high*/
}
nav{
width:100%;
z-index:1001; /*highest*/
}
nav a{
float:left;
width:80%;
padding:10%;
font-size:20px;
}
nav a:hover{
background:#997548;
}
.LevelCnt_1{
float:left;
width:300px;
z-index:1; /*Lowest*/
position:absolute;
left:400px;
background:#baafa9;
}
问题是视觉上.LevelCnt_1如果我设置则保持在标题的顶部 left:0px
为什么会这样？
我有一个显示表格的对话框,当我点击"删除"按钮时,我会弹出另一个对话框要求确认.目前这在第一次工作正常,但如果我第二次单击"删除"按钮,删除对话框将显示在第一个表对话框后面,因此它实际上对用户不可见.
我试图为两个对话框设置z-index,但我不知道它为什么只在第一次工作
以下是我的脚本示例:
// The 1st dialog
var $detaildialog = $('#tableplaceholder').dialog({
autoOpen: false,
modal: true,
width: '800',
height: 'auto'
});
// Some steps to set the url.. then open the dialog
$detaildialog.load(url, function () {
$('#loading').hide();
$detaildialog.dialog('open');
});
// Then, when delete action is called, open the second dialog
fnOnDeleting: function (tr, id, fnDeleteRow) {
var $dialog = $('#checkdeletedialog').dialog({
autoOpen: false,
modal: true,
title: 'Delete Confirmation',
zIndex: 90000
});
$dialog.dialog('open');
}
我在这里做错了什么？
感谢任何帮助..谢谢:)
jQuery自动完成小部件的默认行为是将结果列表定位在输入上方的一个z-index级别,以便后者始终可见,但在我的情况下,这会使文本输入元素蒙上阴影.
我尝试将z-index值输入元素设置为比open结果列表中的结果列表至少高一级,因此没有太大的成功:
open: function () {
setTimeout(function () {
$(this).css('zIndex', 10000);
}, 1);
},
close: function () {
$(this).css('zIndex', 0);
}
输入元素的z-index级别确实升级到10000,而结果列表的z-index级别保持在级别1但输入元素仍然显示在它下面.
有没有人知道为什么会这样？结果列表和输入元素的位置属性分别设置为绝对和相对.这可能是原因吗？
我发现当我想要在顶部的div的父级被修复时,我无法在Chrome中将一个绝对定位的div放在另一个div上:
<div id="parent">
<div id="top"></div>
</div>
<div id="bottom"></div>
这是一个证明问题的JSFiddle:
您应该会在Chrome中看到黄色绝对定位的div与z-index 10出现在绿色绝对定位的div后面,z-index:1,因为父级的固定位置.
其他浏览器如Firefox在绿色顶部显示黄色div.
有关如何在Chrome中解决此问题的任何建议？我无法改变父母的固定位置.
谢谢!
我搜索了很多关于如何在没有z-index的情况下堆叠HTML元素,但是找不到具体的东西.我确实发现没有z-index的堆叠按照HTML外观的顺序发生.
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_without_z-index
此规范对IE有效吗？我有两个div包含在另一个div中.两个div都有绝对的位置:
<div>
<div id"div1" style="position:absolute"></div>
<div id"div2" style="position:absolute"></div>
</div>
对于两个div,即div1和div2,值left和width是相同的.根据我对CSS行为的理解,div2应该总是与div1重叠.'div1'与'div2'重叠的可能性是多少？
我有一个问题.我有一个下拉菜单,但是下拉列表总是在身体后面一层,尽管菜单的z-index设置为999且body的z索引设置为-999
请chceck http://www.w3dominik.com/x/finemoney/(右上角的菜单,它表示下拉列表,应该有2个选项,现在只有1个可见)
感谢帮助
问题
iOS 6中，似乎创造与每一个后代一个新的堆叠内容position以外static，如果不考虑z-index设置与否。
有谁知道这是正常的预期行为，还是这会-webkit-overflow-scrolling干扰堆叠顺序？
例
参见下面的代码，或JSFiddle
这两个row元素都有位置relative，但没有位置z-index。我笔记本电脑上的Google Chrome和Safari都在第二个顶部显示了蓝色的“子菜单” row。
当示例在iOS模拟器上进行测试时，“子菜单”呈现在第二个菜单之后row。删除-webkit-overflow-scrolling: touch它后，渲染效果与我预期的一样。
在我看来，添加-webkit-overflow-scrolling: touch后将为每个后代创建一个新的堆叠上下文，并设置其他位置（static无论是否z-index设置）。
<style>
div.content {
-webkit-overflow-scrolling: touch;
}
div.row {
width: 100%;
position: relative;
background: red;
margin-bottom: 10px;
}
div.sub {
position: absolute;
top: 100%;
z-index: 2;
background: blue;
}
</style>
<div class="content">
<div class="row">
A
<div class="sub">
Sub menu of A<br>
Sub …我正在处理的网站有几个div部分,每个部分都是视口的宽度和高度.它们垂直堆叠,每个都具有相对定位(参见Codepen).每个元素内部都是固定位置h1.我希望h1每个元素中的固定仅在其各自的父元素可见时才保持可见.
我已经尝试了一些z-index实验但没有成功.关于下一步尝试的任何想法？