0
В настоящее время я возился с классом Boostrap Panel и попал в блокпост. Когда я нажимаю, чтобы открыть панель, содержимое под панелью не сбрасывается, а вместо этого поверх поверх нее. Я думал, что могу использовать z-index на панели, но это не сработало. В идеале панель должна выводить контент вниз, но наложение над содержимым также будет приемлемым. Вот какой-то урезанный код, попробованный с помощью jsfiddle, но это давало мне посадку! Дайте мне знать, если вам нужна дополнительная информация, спасибо! (изображения в нижней части)Bootstrap Panel отказывается от Push Content Down при открытии
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="assets/img/favicon.ico" />
<title>UNCVRD</title>
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- Font awesome icons -->
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="assets/css/custom.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet">
<script src="https://use.typekit.net/wvu7wqs.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<!-- Ionicons -->
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- HTML5 shiv and REspond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<div class="lyrics-container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" id="lyric-toggle" href="#collapse1"><i class="icon ion-chevron-down"></i>LYRICS</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Don't tell me this is over
<br> I'll carry you on my shoulder
<br> I'm marching on like a soldier
<br> Turn up the heat
<br> I get colder
<br> You see the trash as a treasure
<br> I'm getting closer than ever
<br> But there it blow,
<br> I got stronger
<br> Just need a little bit longer
<br> I'm the one but a sinner
<br> I'm finding to see it clearer
<br> So let me show you the winner
<br> That's how I pray for forgiveness
<br> No I ain't drowning, I'm boiling
<br> I'll left this world up alone
<br> I'll never be a quitter
<br> Even if it would kill me
</div>
</div>
</div>
</div>
</div>
</div>
<div class="comments-section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus repellendus, eos vitae perspiciatis maxime cupiditate a dicta numquam quibusdam saepe, ullam fugit fugiat atque. Fugiat quam voluptatibus mollitia, cupiditate in.
</div>
<!-- Bootstrap Core Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://apis.google.com/js/platform.js"></script>
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
</html>
CSS:
.panel {
border-radius: 0 !important;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
height: 45px;
}
.panel-default > .panel-heading {
color: black;
background-color: white;
border-radius: 0;
height: 45px;
padding: 0;
}
.panel-title {
font-size: 18px;
vertical-align: middle;
line-height: 45px;
font-family: futura-pt, sans-serif;
font-style: normal;
font-weight: 500;
}
.panel-title a {
text-decoration: none;
}
.panel-title .ion-chevron-down {
padding: 0 16px 0 16px;
}
.panel-title .ion-chevron-up {
padding: 0 16px 0 16px;
}
.panel-body{
background-color: white;
font-size: 14px;
margin-bottom: 66px;
}
Перед нажатием на выпадающем меню 
После нажатия выпадающего 
Я не хочу, чтобы перейти на новую страницу, у меня есть выпадающее меню на полпути вниз страницы (под названием Lyrics), что я хочу в раскрывающемся списке, чтобы показать лирику. Прямо сейчас, если я помещаю текст под раскрывающимся списком, текст появляется над выпадающим меню, вмешиваясь в текст внутри выпадающего списка. Откройте эту страницу как мобильную: http://genius.com/Rae-sremmurd-black-beatles-lyrics прокрутите вниз до раздела «Спросить вопросы», где она имеет аналогичную функцию выпадающего списка. Делает ли то, что я хочу сделать, имеет смысл? Я удалил большинство кода в приведенном выше, чтобы сделать его менее загроможденным –