Позиция CSS поверх всего

У меня естьfab-menu, что я хочу, чтобы он был поверх кнопок таблицы данных см. скриншот (относительное положение):

Введите описание изображения здесь

стиль CSS:

.fab-menu {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 999;
}

Я попробовал абсолютную позицию, которая работала, но fab-menuкнопки неуместны. Посмотреть скриншот (абсолютная позиция):

Введите описание изображения здесь

CSS прокрутки таблицы данных:

.datatable-scroll-wrap {
  width: 100%;
  min-height: .01%;
  overflow-x: auto;
}

PS: Если я удалю overflow-x: auto;кнопки появятся на вершине, но полоса прокрутки таблицы не будет отображаться, если я изменю размер страницы

Метки

1 ответ

  1. под

    .datatable-scroll-wrap {
  width: 100%;
  min-height: .01%;
  overflow-x: auto;
}

    добавить следующее :

    @media (max-width: 767px) {
    .datatable-scroll-wrap .dropdown-menu {
        position: absolute!important;
    }
}
@media (min-width: 768px) {
    .datatable-scroll-wrap {
        overflow: visible;
    }
}