个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我对 CSS 比较陌生，但已经取得了很大进步。不过，我对此不知所措，而且在搜索时似乎找不到答案。我的小网站在 Chrome 上按预期工作，但在 IE 中却不行。我有一个 div，我在其中将 zIndex 设置为 -1 以使其消失。单击按钮时，我将其设置为 100 以将其弹回到前面。在 Chrome 中，这就像一个魅力。在 IE 中，它不显示 div，而是使页面空白，只在页面顶部显示“100”。如果我尝试使用显示而不是 zIndex，IE 只会打印我设置的显示值并删除页面。
<!DOCTYPE html>
<html">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>My Page</title>
</head>
<body style="height:99%; width:99.8%;" onLoad="init();">
<input type="file" id="files" name="files[]" style="visibility: hidden; position: absolute; top: -50; left: -50" />
<div id="topbuttons" style="visibility: hidden;">
<a href="javascript:document.getElementById('optionspanel').style.zIndex=100" class="bluebuttons" id="btnShowOptions">Show Options</a>
</div>
<div id="map-canvas" style="float:left; width: 75%; height: 95%;"></div>
<div id="optionspanel" style="position:absolute; top: 50px; left: 50px; background-color: white; border: 1px solid black; box-shadow: 5px 5px gray">
panel stuff
</div>
<div id="rightpanel" style="float:right; width: 25%;">
<div id="sidecelltop"></div>
<div id="sidecell" style="text-align: center">
<select id="radiuslist" name="radiuslist" multiple style="visibility: hidden"></select>
</div>
</div>
</table>
</body>
</html>
单击按钮时，选项面板的 zIndex 设置为 -1 并显示 Google map ，同时在屏幕顶部显示选项按钮。单击选项按钮时，它应该将选项面板的 zIndex 设置为 100。但是在 IE 中，它在窗口顶部显示“100”，其他所有内容都消失了。 =(
我做错了什么？
预先感谢您的帮助!
CS
最佳答案
不要将 z-index 设置为 -1。最好将该元素设置为显示:无。此外，您的代码中发生了很多疯狂的事情。我清理了一下。如果没有您拥有的所有额外语法，IE 应该会更喜欢这个。这应该是获得所需功能的更好起点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
<style>
body{
width: 100%;
}
#files{
visibility: hidden;
position: absolute;
top: -50;
left: -50;
}
#radiuslist{
visibility: hidden;
}
#optionspanel{
position:absolute;
top: 50px;
left: 50px;
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px gray;
display: none;
}
#map-canvas{
float:left;
width: 75%;
height: 95%;
}
#rightpanel{
float:right;
width: 25%;
}
</style>
</head>
<body>
<input type="file" id="files" name="files[]"/>
<div id="topbuttons">
<span id="showOptions" class="bluebuttons">Show Options</span>
</div>
<div id="map-canvas"></div>
<div id="optionspanel">
panel stuff
</div>
<div id="rightpanel">
<div id="sidecelltop"></div>
<div id="sidecell" style="text-align: center">
<select id="radiuslist" name="radiuslist" multiple></select>
</div>
</div>
</body>
<script>
var show = document.getElementById('showOptions');
show.onclick = function(){
document.getElementById('optionspanel').style.display = 'block';
};
</script>
</html>
关于javascript - zIndex 和显示属性不正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21568889/
27
4
0
我有一个奇怪的情况，zIndex: 5 的按钮位于 Interactable.View 之上zIndex:19。 编辑:它只出现在顶部。它是可见的。但不是(因为缺少更好的术语)可点击。 下面是代码。我
我在对话框中遇到了一个有关 jQueryUI 自动完成的有趣问题。 我的对话框 HTML 如下所示: Title
我试图将 plotBand 放置在轴刻度下方，但其标签位于它们上方。 由于标签继承了 band 的 zIndex 并且无法指定此属性，是否有一种方法不需要我在绘制图表后更改 zIndex？ 查看示例
在下面，我尝试通过单击按钮将绿色圆圈置于前面。我怎样才能实现这个目标？ Click me var ma
我在使用 javascript 更改 z-index 时遇到问题，任何人都可以帮助我解决我出错的地方， 我想要做的是在单击按钮后让一个框出现在另一个框的顶部，但它似乎不起作用。 function to
我想将对话框类中的几个元素的 z-index 设置为 1。 目前我正在使用以下代码: document.getElementsByClassName("dialog")[0].style.zIndex
http://jsfiddle.net/cxwQF/12/ . 注意:红框和绿框应该相交。绿框是图片或视频。悬停时它变成黄色。但不在红色框开始的底部。红框是控件(例如，下一张图片)。 问题。如何将父
我对 CSS 比较陌生，但已经取得了很大进步。不过，我对此不知所措，而且在搜索时似乎找不到答案。我的小网站在 Chrome 上按预期工作，但在 IE 中却不行。我有一个 div，我在其中将 zInde
我有一个带有图标的边栏菜单。菜单文本应仅在图标悬停时显示。但是，由于元素之前的 Zindex 问题，这并不完美。如下图所示，将鼠标悬停在红色区域不应显示侧边栏菜单，但确实如此。 显示问题的图像 ->>
我有一个我一直在尝试开发的网站，该网站的一部分是开发一个滑出菜单，当鼠标悬停时该菜单会水平滑出。我首先将菜单默认设置为完全扩展，这样更容易实时开发。 为了视觉引用，我正在尝试实现这样的目标: |---
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Jquery Draggable + Bring to Front 我有一个网站，用户可以在其中打开多个聊天
我有一堆 div 位于图像之上。我试图让 div 隐藏的分数出现在鼠标悬停上。为此，我尝试将 div 的 zIndex 设置为低于图像的 zIndex，以便显示出来。但我似乎可以选择所有的 div。
我正在尝试通过 Jquery 设置 z-Index，但我需要除名为 importantdiv 的一个之外的每个 DIV 都在 0-100 之间。唯一的问题是 importantdiv 的 z-inde
我有一个菜单和一个幻灯片，菜单的 zindex 大于幻灯片的 zindex，但由于某种原因它被幻灯片覆盖了。我查看了 zindex 上的文档，但找不到发生这种情况的任何原因。 您可以访问此处的站点:h
我有一个蓝色标题，我想在另一个 View 中使用动画事件参与其中。但在我执行动画功能之前，我手动设置了 zIndexes 并且知道它根本不起作用!意味着当我为组件的 zIndex 属性赋予 1 或 1
如何将任何控件设置到屏幕的最顶部。例如我在数据模板或层次结构数据模板中有一个文本 block ……现在我想在鼠标悬停时将此文本 block 设置为最上面。在 IsMouseOver 触发器中将 Gri
我使用 jquery-ui-1.8.18.custom.min.js 作为 jquery 对话框。 以下是打开代码: $('#userDetLink').click(function (e)
这个问题在这里已经有了答案: WPF - How can I place a usercontrol over an AdornedElementPlaceholder? (2 个答案) 关闭 2
作为一个有趣的办公项目，我们正在构建一个很酷的过渡背景 Winform 的应用程序来替换标准的 Windows 桌面背景。 挑战之一是我们需要将 WinForm 窗口置于桌面背景和图标之上，而不是任务
我正在将我的 Android 应用升级到 Marshmallow 23 以及最新的 GoogleMaps V2。我这样做的一个原因是因为最新的 map 允许一个 .zIndex 参数，它允许我们设置我
我是一名优秀的程序员,十分优秀！