在我的示例中，如何修复z-index？
[英]How to fix z-index in my example?
问题描述
I had a navbar that worked as intended until I added some transitions from this example to my dropdown menus: they slide from "over" the navbar instead of from under it. 
我有一个导航栏，该导航栏按预期工作，直到从该示例向下拉菜单添加了一些过渡：它们从导航栏“上方”滑动而不是从导航栏下方滑动。 I've tried reassigning z-indexes in various ways to no avail. 我尝试以各种方式重新分配z-indexs都没有用。 How can I fix that? 我该如何解决？
Additionally, somehow it also affected the language selection menu (on the right): it's dropdown is supposed to be aligned right, but not it's glitching (if you move cursor to the right edge, it keeps switching before float:right and float:left, somehow). 此外，它还以某种方式影响了语言选择菜单（在右侧）：下拉菜单应该右对齐，但不是小故障（如果将光标移到右边缘，它将继续在float：right和float：left之前切换， 不知何故）。 EDIT: this glitch is fixed. 编辑：此故障是固定的。
It looks like that right now. 现在看起来像那样 。 My HTML: 我的HTML：
<!DOCTYPE html>
<html lang="en">
<!-- ########## HEAD ########## -->
<head>
<!-- ########## META ########## -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bla</title>
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/navbar.css">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
</head>
<body>
<!-- ########## HEADER ########## -->
<header>
<div class="row">
<div class="col-1"><div class="navcont"><span style="visibility: hidden;"> </span></div></div>
<div class="col-10">
<nav id="navmenu">
<ul>
<li class="active"><a href="#"><i class="fa fa-book"></i> <span>Dictionary</span></a></li>
<li><a href="#"><i class="fa fa-key"></i> <span>Grammar</span></a></li>
<li><a href="#"><i class="fa fa-graduation-cap"></i> <span>Learn!</span></a></li>
<li class="has-sub"><a href="#"><i class="fa fa-gamepad"></i> <span>Games</span> <i class="fas fa-caret-down"></i></a>
<ul>
<li class="has-sub"><a href="#"><span>Match Words</span></a></li>
<li class="has-sub"><a href="#"><span>Crossword</span></a></li>
<li class="has-sub"><a href="#"><span>Hangman</span></a></li>
<li class="has-sub"><a href="#"><span>Guess!</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><i class="fa fa-wrench"></i> <span>Tools</span> <i class="fas fa-caret-down"></i></a>
<ul>
<li class="has-sub"><a href="#"><span>Tool 1</span></a>
</li>
<li class="has-sub"><a href="#"><span>Tool 2</span></a>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-info-circle"></i> <span>About</span> <i class="fas fa-caret-down"></i></a>
<ul>
<li class="has-sub"><a href="#"><span>News</span></a></li>
<li class="has-sub"><a href="#"><span>Guide</span></a></li>
<li class="has-sub"><a href="#"><span>Statistics</span></a></li>
<li class="has-sub"><a href="#"><span>Sources</span></a></li>
<li class="has-sub"><a href="#"><span>Terms of Use</span></a></li>
<li class="has-sub"><a href="#"><span>Contact</span></a></li>
</ul>
</li>
<li class="rightside"><a href="#"><img src="img/flags/en.png" class="langmenu" style="float: left; vertical-align: bottom; padding-top: 3px"> <i class="fas fa-caret-down"></i></a>
<ul>
<li class="has-sub"><a href="#"><img src="img/flags/en.png" class="langmenu"> <span class="langmenu">English</span></a></li>
<li class="has-sub"><a href="#"><img src="img/flags/fr.png" class="langmenu"> <span class="langmenu">French</span></a></li>
<li class="has-sub"><a href="#"><img src="img/flags/de.png" class="langmenu"> <span class="langmenu">German</span></a></li>
<li class="has-sub"><a href="#"><img src="img/flags/ru.png" class="langmenu"> <span class="langmenu">Russian</span></a></li>
<li class="has-sub"><a href="#"><img src="img/flags/pl.png" class="langmenu"> <span class="langmenu">Polish</span></a></li>
<li class="has-sub"><a href="#"><img src="img/flags/cz.png" class="langmenu"> <span class="langmenu">Czech</span></a></li>
<li class="has-sub"><a href="#"><img src="img/flags/zh.png" class="langmenu"> <span class="langmenu">Mandarin</span></a></li>
</ul>
</li>
<li class="rightside"><a href="#"><i class="fa fa-user"></i></a></li>
</ul>
</nav>
</div>
<div class="col-1"><div class="navcont"><span style="visibility: hidden;"> XXXXXXXXXXXXXXXX</span></div></div>
</div>
</header>
</body>
</html>
And CSS: 和CSS：
@charset "UTF-8";
#navmenu > ul,
#navmenu > ul li,
#navmenu > ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#navmenu > ul {
position: relative;
z-index: 2;
}
#navmenu > ul li {
float: left;
line-height: 1.3em;
vertical-align: middle;
z-index: -20;
}
#navmenu > ul li.hover,
#navmenu > ul li:hover {
position: relative;
z-index: 4;
cursor: default;
}
#navmenu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
width: 100%;
/* drop animation 1 */
opacity: 0;
transform: translateY(-5em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
/* --- */
}
#navmenu > ul ul li {
float: none;
}
#navmenu > ul ul ul {
top: 1px;
left: 99%;
z-index: -20;
}
#navmenu > ul li:hover > ul {
visibility: visible;
/* drop animation 2 */
opacity: 1;
z-index: -2;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;
/* --- */
}
#navmenu > ul > li.last ul ul {
left: auto !important;
right: 99%;
}
#navmenu > ul > li.last ul {
left: auto;
right: 0;
}
#navmenu > ul > li.last {
text-align: right;
}
/* Theme Styles */
#navmenu > ul {
border-bottom: 4px solid #ed7512;
font-size: 1.2em;
background: #4889f2;
width: auto;
}
#navmenu > ul:before {
content: '';
display: block;
}
#navmenu > ul:after {
content: '';
display: table;
clear: both;
}
#navmenu > ul li a {
display: inline-block;
padding: 0.7em 1em;
}
#navmenu > ul > li.active {
background-color: #ed7a1c;
}
#navmenu > ul > li.active:hover {
background-color: #cc6918;
}
#navmenu > ul > li > a:link,
#navmenu > ul > li > a:active,
#navmenu > ul > li > a:visited {
color: #ffffff;
}
#navmenu > ul > li > a:hover {
color: #ffffff;
}
#navmenu > ul ul ul {
top: 0;
}
#navmenu > ul li li {
background-color: #4889f2;
border-bottom: 1px solid #ebebeb;
font-size: 1.0em;
}
#navmenu > ul li.hover,
#navmenu > ul li:hover {
background-color: #1556bf;
}
#navmenu > ul > li.hover,
#navmenu > ul > li:hover {
background-color: #1556bf;
-webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
transition: all 0.3s ease-in-out;
}
#navmenu > ul a:link,
#navmenu > ul a:visited {
color: #ffffff;
text-decoration: none;
}
#navmenu > ul a:hover {
color: #ffffff;
}
#navmenu > ul a:active {
color: #ffffff;
}
#navmenu > ul ul {
border: 1px solid #CCC \9;
-webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
width: 150px;
}
#navmenu a, #navmenu li, #navmenu li ul {
width: auto;
}
#navmenu li {
position: relative;
}
#navmenu li li {
white-space: nowrap;
}
#navmenu li ul {
min-width: 100%;
}
.langmenu {
vertical-align: middle;
display: inline-block;
position: relative;
}
#navmenu li.rightside:hover ul{
left:auto;
right:0;
}
.rightside {
float: right !important;
}
/* left and right navbar continuation */
.navcont {
border-bottom: 4px solid #ed7512;
line-height: 1.25em;
background: #4889f2;
width: 100%;
padding: 1em 1em;
font-family: inherit;
}
@charset "UTF-8";
/* allows using FontAwesome in CSS "content" */
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
body {
background-color: ivory;
margin: 0px;
padding: 0px;
font-family: Calibri, Tahoma, Arial, sans-serif;
}
* {
box-sizing: border-box;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
float: left;
padding: 0px;
border: none;
}
.row::after {
content: "";
clear: both;
display: table;
}
.spacer {
height: 1em;
width: 100%;
display: block;
}
.sidemargin {
visibility: hidden;
}
[1]: https://codepen.io/shshaw/pen/gsFch
[2]: https://codepen.io/iyoossaev/pen/mXgpQg
2 个解决方案
解决方案1
1 已采纳 2018-03-03 15:43:04
Use right:0 instead of left:0 in #navmenu > ul ul 在#navmenu> ul ul中使用right：0而不是left：0
#navmenu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
right: 0;
width: 100%;
/* drop animation 1 */
opacity: 0;
transform: translateY(-5em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
/* --- */
}
解决方案2
1 2018-03-03 16:02:32
The z-index property specifies the stack order of an element.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
#navmenu > ul li a {
position:relative;
background-color: #4889f2;
}
#navmenu > ul ul {
z-index: 0;
}
Here is html https://jsfiddle.net/7ghy24qr/ 这是html https://jsfiddle.net/7ghy24qr/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何修复 Bootstrap 中的 z-index 问题？ - How to fix a z-index issue in Bootstrap?
如何解决z-index问题？ - How to fix z-index issue?
您将如何解决这个常见的IE Z-index错误的罕见示例？ - How would you fix this uncommon example of the common IE Z-index bug?
为什么模态背景与我的弹出模态重叠甚至设置了 !important 和 z-index？ 如何解决？ - Why modal-backdrop overlapped my popup modal even set !important and z-index? How to fix it?
如何解决 z-index 和溢出问题：scroll - How to fix problem with z-index and overflow:scroll
如何修复覆盖“z-index：-1”规则的背景颜色 - How to fix background-color covering the "z-index: -1" rule
如何修复翻转的div背面的bootstrap下拉z-index？ - How to fix bootstrap dropdown z-index in the backside of a flipped div?
如何使用Z-index设置div并修复css - How to set div using Z-index and fix css
如何修复 IE7 中的 HTML z-index 图层排序？ - How to fix HTML z-index layer ordering in IE7?
简单的CSS z-index示例不起作用 - Simple CSS z-index example not working
相关标签