У меня есть боковая навигация. При щелчке по значку он переключает ширину родительского div в полный контент. Каждый элемент навигации с родительским элементом представляет собой div с некоторым вспомогательным текстом и ссылками. При нажатии на мою иконку применяется класс slimNav, поэтому при наведении указателя мыши на конкретный модуль я хочу, чтобы этот div немного расширялся, добавлял фон и находился поверх окружающих элементов. Но что происходит, так это то, что элементы под находящимся предметом движутся вверх.
Вот HTML
<div class="slimNav" data-bind="foreach: modules">
<div class="modules" data-bind="click: showModuleNodes">
<div class="block">
<i data-bind="css: cssClass" class="fa-alignment"></i>
</div>
<div class="headertooltip">
<span class="headertooltiptext" data-bind="text: name"></span>
</div>
<div class="tooltip">
<span data-bind="text: name" class="header"></span>
<ul class="tooltiptext" data-bind="foreach: nodes, visible: nodesVisible">
<!-- ko template: hasChildren() ? "has-child-node" : "no-child-node" --><!-- /ko -->
</ul>
</div>
</div>
</div>
CSS
.slimNav .modules:hover {
position:absolute;
left:0;
z-index:10;
background:green;
width:205px;
padding:5px;
}
Вот оно в режиме slim
Теперь, когда я наведу курсор, заметьте, как элементы под скрытым изображением скользят вверх.
