我已经购买了一个图片库并将其实施到我的网页中。现在画廊每次都在前台，菜单在下面。我试图用z-index修复它，但它似乎不起作用。
我上传了网页，以便您可以看到代码。我无法发布java代码，因为我购买了它并且我不允许发布它。
感谢您的帮助，
帕特里克
HTML：
<!DOCTYPE html>
<html lang="de" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio von </title>
<meta name="description" content="Das ist das Portfolio von" />
<meta name="keywords" content="photo, photos, Foto, Fotografie, Messerli, usw" />
<meta name="author" content="xyz" />
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/menu_cornermorph.css" />
<link rel="shortcut icon" href="img/Chantale-favicon.png" />
<!--NUR BEI GALLERIE!!! -->
<link rel="stylesheet" type="text/css" href="content/global.css">
<script type="text/javascript" src="java/FWDIGP.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="menu-wrap">
<nav class="menu">
<!-- <div class="profile"><img src="img/user1.png" alt="Matthew Greenberg"/><span>Matthew Greenberg</span></div> -->
<div class="link-list">
<a href="index.html"><span>Home</span></a>
<a href="#"><span>About me</span></a>
<a href="#"><span>My Photos</span></a>
<a href="#"><span>Security & Privacy</span></a>
<a href="#"><span>Personal Settings</span></a>
<a href="#"><span>Security & Privacy</span></a>
</div>
<div class="icon-list">
<a href="#"><i class="fa fa-fw fa-envelope"></i></a>
<a href="https://www.behance.net/"><i class="fa fa-fw fa-behance"></i></a>
<a href="http://instagram.com/"><i class="fa fa-fw fa-instagram"></i></a>
</div>
</nav>
</div>
<button class="menu-button" id="open-button"><i class="fa fa-fw fa-bars"></i><span>Menu öffnen</span></button>
<div class="content-wrap">
<div class="content">
<div class="vert-galerie">
<div class="table">
<div class="vert-fix">
<div id="galerie">
<div id="Playlist" >
<ul data-category-name="Alle Bilder">
<li data-thumbnail-path="content/media/thumbnails/1.jpg" data-url="content/media/images/1.jpg">
<div>
<p class="gallery1DecHeader">Infinite Grid Pro</p>
<p class="gallery1DescP">Multimedia infinite grid for your website that can only be found on sale here, it runs on all major browsers and mobile devices like iPhone, iPad, IOS, Android and Windows8.</p>
</div>
</li>
<li data-thumbnail-path="content/media/thumbnails/2.jpg" data-url="content/media/images/2.jpg">
<div>
<p class="gallery1DecHeader">Revolution Lightbox, think outside the lightbox!</p>
<p class="gallery1DescP">Full blown multimedia responsive lightbox included, it runs on all major browsers and mobile devices like iPhone, iPad, iOS, Android and Windows8. It has support for image, video (mp4), audio (mp3), Vimeo, YouTube, iFrame, Google maps and flash.</p>
</div>
</li>
<li data-thumbnail-path="content/media/thumbnails/3.jpg" data-url="content/media/images/3.jpg">
<div>
<p class="gallery1DecHeader">Support for unlimited categories!</p>
<p class="gallery1DescP">Supports unlimited categories and each categories can have unlimited content.</p>
</div>
</li>
<li data-thumbnail-path="content/media/thumbnails/4.jpg" data-url="content/media/images/4.jpg">
<div>
<p class="gallery1DecHeader">Customizable thumbnails action</p>
<p class="gallery1DescP"> When a thumbnail is pressed you can choose to do nothing, display multimedia content using our great <a href="http://www.webdesign-flash.ro/p/rl/" target="_blank">revolution lightbox</a>, or to open a new webpage. The lightbox has support for image, video (mp4), audio (mp3), Vimeo, YouTube, iFrame, Google maps and flash.</p>
</div>
</li>
<li data-thumbnail-path="content/media/thumbnails/5.jpg" data-url="content/media/images/5.jpg">
<div>
<p class="gallery1DecHeader">Outstanding performance using OOP code and CSS3</p>
<p class="gallery1DescP">High performance using OOP code and the latest CSS3 techniques, ready for mobile with swipe and pinch support, very flexible, easy to setup and extremely customizable.</p>
</div>
</li>
<li data-thumbnail-path="content/media/thumbnails/6.jpg" data-url="content/media/images/6.jpg">
<div>
<p class="gallery1DecHeader">Support for four display types</p>
<p class="gallery1DescP">Support for four display types, responsive, fixed, fullscreen and fluid width.</p>
</div>
</li>
<li data-thumbnail-path="content/media/thumbnails/7.jpg" data-url="content/media/images/7.jpg">
<div>
<p class="gallery1DecHeader">Optional drop down categories menu</p>
<p class="gallery1DescP">Optional drop down categories menu, this categories selector can be positioned on the left or right side of the grid canvas.</p>
</div>
</li>
<li data-thumbnail-path="content/media/thumbnails/8.jpg" data-url="content/media/images/8.jpg">
<div>
<p class="gallery1DecHeader">Customizable drag</p>
<p class="gallery1DescP">Customizable drag, the grid drag direction can be set to horizontal, vertical, both or none.</p>
</div>
</li>
<li data-thumbnail-path="content/media/thumbnails/9.jpg" data-url="content/media/images/9.jpg">
<div>
<p class="gallery1DecHeader">Auto scroll</p>
<p class="gallery1DescP">Auto scroll, the grid can be set to auto scroll, the auto scroll direction and speed are customizable.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /content-wrap -->
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/main.js"></script>
</body>
</html>
menu_cornermorph.css：
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.content-wrap {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 1001;
}
.content {
position: relative;
background: #b4bad2;
min-height: 100%;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
transition: opacity 0.3s, transform 0s 0.3s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
/* Menu Button */
.menu-button {
position: fixed;
bottom: 0;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
font-size: 1.5em;
color: #373a47;
background: transparent;
}
.menu-button span {
display: none;
}
.menu-button:hover {
opacity: 0.6;
}
/* Menu */
.menu-wrap {
position: fixed;
z-index: 999;
background: #ebedf4;
-webkit-transition: width 0.3s, height 0.3s;
transition: width 0.3s, height 0.3s;
width: 0;
height: 0;
font-size: 1.5em;
bottom: 1em;
left: 1em;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
@media screen and (max-width: 50em) {
.menu-button {
margin: 0.25em;
}
.menu-wrap {
bottom: 0.25em;
left: 0.25em;
}
}
.menu {
height: 100%;
opacity: 0;
font-size: 0.65em;
color: #64697d;
text-align: left;
}
.profile {
display: inline-block;
line-height: 42px;
font-weight: 700;
padding: 1em;
}
.profile img {
float: right;
border-radius: 50%;
margin-left: 10px;
}
.link-list {
padding: 1.35em 0;
margin: 0 0.75em;
border-bottom: 3px solid rgba(125,129,148,0.2);
}
.link-list a {
display: block;
margin: 0.25em 0;
color: #7d8194;
padding: 0.5em 1.5em 0.5em 0em;
}
.link-list a:hover,
.link-list a:focus {
color: #64697d;
}
.link-list a span {
margin-left: 10px;
font-weight: 700;
vertical-align: middle;
}
.icon-list {
position: absolute;
right: 1em;
bottom: 0.9em;
}
.icon-list a {
font-size: 1.5em;
margin-left: 0.25em;
color: rgba(125,129,148,0.5);
}
/* Shown menu */
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .menu-wrap {
width: 280px;
height: 340px;
-webkit-animation: anim-jelly 0.8s linear forwards;
animation: anim-jelly 0.8s linear forwards;
}
.show-menu .menu {
opacity: 1;
-webkit-transition: opacity 0.3s 0.3s;
transition: opacity 0.3s 0.3s;
}
答案 0 :(得分：0)
这有效：
.content {
position: relative;
background: #b4bad2;
min-height: 100%;
z-index: 1; //insert this line
}