个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我有一个我一直在尝试开发的网站，该网站的一部分是开发一个滑出菜单，当鼠标悬停时该菜单会水平滑出。我首先将菜单默认设置为完全扩展，这样更容易实时开发。
为了视觉引用，我正在尝试实现这样的目标:
|--------------|_____________
|Menu 1 >|Menu 1 item 1|
|Menu 2 .|Menu 1 item 2|
|Menu 3 .|Menu 1 item 3|
|______________|_____________|
我的代码是这样的:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
@charset "utf-8";
/* CSS Document */
#sidebar {
position: fixed;
left: 0;
top: 0;
background: #151515;
width: 250px;
height: 100%;
z-index: 2;
overflow-x: hidden;
overflow-y: hidden;
display: block;
transition: 0.5s;
}
#sidebarInfo{
margin: 0px,5px,10px,5px;
color: #7E7E7E;
width: 100%;
height: 50px;
position: relative;
font-family: allerta, sans-serif;
font-size: 9.5px;
top: 70%;
align-content: center;
display:flex;
justify-content:center;
align-items:center;
}
.sidebarLi{
position: relative;
margin: 10px;
font-size: 28px;
color: aliceblue;
width: 100%;
font-family: allerta, sans-serif;
}
.slideMenu{
position:relative;
transition:0.4s;
}
.menuItem{
position:relative;
transition: 0.4s;
width: 150px;
height: 30px;
overflow-x: visible;
overflow-y: visible;
left: 180px;
z-index: 0;
color: #000000;
background: #FFFFFF;
}
</style>
<title>Caduceus Technologies</title>
</head>
<body>
<div id="sidebar">
<div class="sidebarLi">
• Home
</div>
<div class="sidebarLi">
<div class="slideMenu">
• Projects
<div class="menuItem">
menuItem1
</div>
</div>
</div>
<div class="sidebarLi">
• Resume
</div>
<div class="sidebarLi">
• Contact
</div>
</div>
<div style="background:#1D1D1D; position: relative; width:1000px; height: 1000px;">
Lorem
</div>
</body>
</html>
但是，虽然我无法上传图片，但解析此文档会显示 menuItem 仅部分显示，即使 Z 值指示带有文本“菜单项”的 div 位于顶部。到底出了什么问题？
最佳答案
menuItem1 部分显示，因为包含 sidebar 的 div 具有固定宽度，并且具有 overflow: hidden，隐藏任何溢出该容器的内容(menuItem1 所做的)。
删除 overflow: hidden 并且它是可见的(但会溢出您的容器)。
关于html - Zindex 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43770662/
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 参数，它允许我们设置我
我是一名优秀的程序员,十分优秀！