我有一个我和朋友一起制作的网站，并且有一个问题，当下拉选项卡正在使用jquery进行slideToggle（）时，它会将html div移动到它下方，我只是希望它重叠它有没有简单的方法呢？
这是我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.0.min.js"
integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
crossorigin="anonymous"></script>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'/>
<link href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Architects+Daughter|Coda|Indie+Flower|Shadows+Into+Light|Special+Elite" rel="stylesheet">
<title>ALFEX Inc.</title>
</head>
<body>
<div class='content'>
<div class='header'>
<h1>ALFEX INCORPORATED</h1>
<ul class='tabsbar'>
<a class='link' href='alfex.html'><li class='tab'>Home</li></a>
<div class='link'><li class='tab' id='gam'>Gags & Memes</li></div>
<div class='link'><li class='tab' id='crew'>The Crew</li></div>
<a class='link' href='alfex-codex.html'><li class='tab'>The Codex</li></a>
<a class='link' href='alfex-minigames.html'><li class='tab'>Minigames</li></a>
</ul>
</div>
<div class='panel-gam'>
<ul class='panel-list'>
<a class='p-link' href='alfex-gagsandmemes-doggo.html'><li class='p-tab'>Doggo Memes</li></a>
<a class='p-link' href='alfex-gagsandmemes-dad.html'><li class='p-tab'>Dad Jokes</li></a>
<a class='p-link' href='alfex-gagsandmemes-pun.html'><li class='p-tab'>Puns</li></a>
</ul>
</div>
<div class='panel-crew'>
<ul class='panel-list'>
<a class='p-link' href='alfex-alfie.html'><li class='p-tab'>Alfie</li></a>
<a class='p-link' href='alfex-alex.html'><li class='p-tab'>Alex</li></a>
</ul>
</div>
<div class='main'>
<h2>Welcome to the Alfex Inc. website</h2>
<h3>for all your cousin needs xD.</h3>
<div class='olexparent'>
<iframe class='olexvideo' width="560" height="315" src="https://www.youtube.com/embed/aa6IGzjY_kI?list=PLsCWhnzJYhqRCjHKprzyP7vQBJexv6OOZ" frameborder="0" allowfullscreen align="right"></iframe>
</div>
<p class="intro"></p>
</div>
</div>
</body>
</html>
这是我的JavaScript代码：
$(document).ready(function() {
$('.content').hide();
$('.content').fadeIn(800);
$('#gam').click(function() {
$('.panel-crew').slideUp(0);
$('.panel-gam').slideToggle();
});
$('#crew').click(function() {
$('.panel-gam').slideUp(0);
$('.panel-crew').slideToggle();
});
});
如果需要，这是我的CSS：
/* * {
border-style: solid;
border-width: 0.5px;
border-color: #fff;
box-sizing: border-box;
} */
body {
margin: 0px;
padding: 0px;
background-image: url('http://images.naldzgraphics.net/2012/08/4-lined.jpg');
background-repeat: repeat-y;
background-size: 100%;
}
.tabsbar {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #525c68;
}
.tab {
padding: 18px 0px 18px 0px;
float: left;
max-width: 20%;
min-width: 20%;
display: block;
text-align: center;
background-color: #525c68;
color: #5dbace;
}
.header {
display: block;
background-color: #525c68;
}
.link{
text-decoration: none;
background-color: #525c68;
color: #7bcadb;
font-family: 'Special Elite', 'Coda', sans-serif;
}
h1 {
color: #ffffff;
font-family: sans-serif;
font-size: 550%;
display: block;
background-color: #525c68;
margin: 0px;
text-align: center;
padding: 10px;
}
p {
font-family: 'Annie Use Your Telescope', 'Indie Flower', 'Shadows Into Light', 'Architects Daughter', cursive;
font-size: 24px;
}
h2 {
font-size: 30px;
font-family: 'Special Elite', 'Annie Use Your Telescope', cursive;
padding: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
padding-bottom: 10px;
}
.main {
background-color: #d8d8d8;
max-width: 80%;
margin: 0px 10% 180px 10%;
padding: 80px 80px 100px 80px;
}
h3, .minigames-subheading, .minigames-subheading2, .alfie-subheading {
opacity: 0.5;
padding: 5px 0px 0px 0px;
position: relative;
bottom: 20px;
font-style: italic;
font-family: 'Coda', sans-serif;
margin-right: 50%;
font-size: 26px;
}
.olexvideo {
max-width: 100%;
position: relative;
bottom: 59px;
max-width: 52%;
}
.panel-gam {
text-decoration: none;
background-color: #525c68;
border-radius: 0px 0px 10px 10px;
width: 20%;
display: none;
padding-top: 0px;
position: relative;
left: 20%;
}
.panel-crew {
text-decoration: none;
background-color: #525c68;
border-radius: 0px 0px 10px 10px;
width: 20%;
display: none;
padding-top: 0px;
position: relative;
left: 40%;
}
.p-link {
text-decoration: none;
color: #ffffff;
font-family: 'Special Elite', 'Coda', sans-serif;
padding: 0px 20px 20px 20px;
}
.panel-list {
padding: 0px 40px 10px 40px;
list-style-type: none;
}
a.p-link:hover {
color: #d8d8d8;
}
h4 {
font-family: 'Special Elite', 'Annie Use Your Telescope', cursive;
padding: 0px;
font-size: 20px;
border-bottom-style: solid;
border-bottom-color: #737373;
border-bottom-width: 2px;
padding-bottom: 5px;
}
.rockpaperscissors {
border-style: solid;
border-width: 5px;
border-radius: 10px;
margin: 20px 0px 10px 0px;
padding: 20px 20px 60px 20px;
background: #a6a6a6;
border-color: #a6a6a6;
min-height: 300px;
}
button {
border-style: outset;
border-color: #4f5864;
background-color: #525c68;
color: #7bcadb;
padding: 40px;
border-radius: 5px;
font-family: 'Special Elite', 'Coda', sans-serif;
width: 33%;
font-size: 28px;
}
button:hover {
border-style: inset;
border-color: #73c6d9;
background-color: #7bcadb;
color: #ffffff;
}
.result {
font-family: 'Special Elite', 'Coda', sans-serif;
font-size: 50px;
}
.reset {
position: relative;
top: 20px;
width: 100%;
}
li.tab:hover {
background-color: #7bcadb;
color: #ffffff;
}
.specialised-memes {
border: none;
padding: 20px 5px 20px 5px;
font-family:
width: 100%;
height: 1000px;
overflow: scroll;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background: #999;
}
.page-feed {
position: relative;
bottom: 1000px;
max-width: 45%;
overflow: scroll;
}
img {
width: 100%;
padding: 20px 0px 20px 0px;
}
.left-side {
width: 520px;
}
.fb-picture {
position: relative;
bottom: 393px;
background-color: #a6a6a6;
border-radius: 10px;
}
.embed {
border-radius: 50px;
padding: 50px;
background-color: #a6a6a6;
width: 50%;
}
.intro {
margin-left: 20px;
}