#css #mdbootstrap
Вопрос:
В приведенном ниже коде у меня есть навигационная панель, которая закреплена внизу и расширяется вверх, когда я нажимаю стрелку вправо, и когда я нажимаю левую кнопку, мне нужен div, чтобы развернуться вверх, поверх навигационной панели и придерживаться ее независимо от содержимого этого div, но независимо от того, какое свойство для позиции я пробовал, даже пробовал flex, я не могу заставить его работать.
Есть кто-нибудь, кто может здесь помочь?
Мой код:
jQuery('.ExpandCollapsDIV').click(function(e) {
jQuery('.collapse').collapse('hide');
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700amp;display=swap" rel="stylesheet" />
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet" />
<div class="collapse navbar-collapse bg-secondary" id="MessageDIVNav" style="position: absolute; bottom: 100px; width: 100%; background-color: #FFFFFF;">
<font class="text-white" style="font-size: 12px;">
<li>Top List 1</li>
<li>Top List 2</li>
<li>Top List 3</li>
<li>Top List 4</li>
<li>Top List 5</li>
<li>Top List 6</li>
<li>...</li>
</font>
</div>
<nav class="navbar fixed-bottom navbar-expand-lg bg-primary">
<div class="container-fluid">
<table style="width: 100%">
<tr>
<td align="left">
<div class="ExpandCollapsDIV" data-mdb-toggle="collapse" data-mdb-target="#MessageDIVNav" aria-controls="MessageDIVNav" aria-expanded="false" aria-label="Toggle navigation">
<font class="text-white"><i class="fas fa-arrow-up fa-2x"></i></font>
</div>
</td>
<td align="right">
<div class="ExpandCollapsDIV" data-mdb-toggle="collapse" data-mdb-target="#navbarSupportedContentBottom" aria-controls="navbarSupportedContentBottom" aria-expanded="false" aria-label="Toggle navigation" id="SystemInfodiv1"><i class="fas fa-arrow-down text-white fa-2x"></i></div>
</td>
</tr>
</table>
<div class="collapse navbar-collapse" id="navbarSupportedContentBottom">
<font class="text-white" style="font-size: 12px;">
<li>Bottom List 1</li>
<li>BottomList 2</li>
<li>BottomList 3</li>
<li>...</li>
</font>
</div>
</div>
</nav>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"></script> Ответ №1:
Ну, а ты пробовал:
position: relative; необязательно
z-index: 9999; я считаю, что сверху находится большее число, а значение по умолчанию равно нулю
Комментарии:
1. Да и все 4 других свойства позиции. Z-индекс касается другого элемента, я забыл его удалить, будет обновляться..