У меня проблемы с некоторыми CSS. У меня есть пункты меню, в которых я всплываю с меню, чтобы переименовать, скрыть или удалить его, я включил CSS, но он находится ниже div, присутствующего в меню. Я хочу сверху. Также я использую bootstrap css.

Фрагмент:

.form-group {
  margin-bottom: 15px;
}
.pagesmenu {
  position: relative;
  background-color: #d3edff;
  border-radius: 7px;
  border: 1px solid #cde;
  box-sizing: border-box;
  color: #2b5672;
  height: 39px;
  line-height: 39px;
  padding-left: 12px;
  width: 200px;
}
.pagesmenu.selected {
  background-color: #d3edff;
}
.portlet-body.form {
  background: #f0f3f5;
  padding: 10px;
}
.pageoption {
  float: right;
  display: inline-block;
  margin-right: 10px;
}
.dropdownpageopt {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdownpageopt a {
  color: black;
  padding: 2px 6px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index: 9999;
}
.dropdownpageopt a:hover {
  background-color: #f1f1f1
}
.pageoption:hover .dropdownpageopt {
  display: block;
}
<div class="form-body ui-sortable" id="nitspopupmenu">

  <div class="form-group ui-sortable-handle" id="div-1">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Home<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-2">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> About Us<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-3">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Services<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-4">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Our Team<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-5">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Portfolio<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-6">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Clients<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-7">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Blog<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-8">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Contact<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
</div>

Пожалуйста, помогите мне. благодаря

html css
0
Nitish Kumar 4 Май 2016 в 08:41

3 ответа

Лучший ответ

Применение более высокого z-индекса в раскрывающемся меню поможет.

.dropdownpageopt {
  z-index:1; // can make this higher if required. eg, 99
}
2
partypete25 4 Май 2016 в 05:48

Вы можете использовать Z-index для всего класса .dropdownpageopt, добавляя каждую ссылку внутри него, так что весь белый квадрат и все остальное внутри него могут быть наверху, например:

.dropdownpageopt {
    z-index: 99;
}

Вы можете добавить z-index в свой код css в разделе, который включает класс .dropdownpageopt, например:

 .dropdownpageopt {
     display: none;
     position: absolute;   /*<-- this is needed to make z-index work*/
     background-color: #f9f9f9;
     min-width: 100px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     margin-top: -30px;

     z-index: 99; /*<---this*/


  }

Или в этом разделе:

.pageoption:hover .dropdownpageopt {
    display: block;
    z-index: 99; /*<---this*/
}

Проблема в вашем случае заключается в том, что Z-index работает только с позиционированным элементом (например: absolute / fixed / relative), который вы не помещали в ссылку внутри dropdownpageopt (это объясняется: Здесь.). и даже если вы это сделали, и z-index работает, он будет работать только для ссылки внутри, а белое поле останется не наверху. поэтому вам нужно поместить z-индекс во весь класс dropdownpageopt.

И значение не обязательно должно быть 99 или даже 9999, я пробовал 2 и 1 на .dropdownpageopt, и он работает.

-Я надеюсь, что это поможет.

0
DikaDikz 4 Май 2016 в 06:41 
.pagesmenu {
  position: inline-block;
  background-color: #d3edff;
  border-radius: 7px;
  border: 1px solid #cde;
  box-sizing: border-box;
  color: #2b5672;
  height: 39px;
  line-height: 39px;
  padding-left: 12px;
  width: 200px;
}
0
Nouman Bhatti 4 Май 2016 в 05:49

Похожие вопросы

31 Как я могу сделать div не больше его содержимого?
29 Как выровнять содержимое div по нижнему краю
35 Как сделать div 100% высотой окна браузера
24 Как оформить раскрывающийся список <select> только с помощью CSS?
31 Как мне вертикально выровнять текст в div?
9 Как наложить один div на другой div
31 Как автоматически изменить размер изображения, чтобы оно соответствовало контейнеру div?
27 Как я могу центрировать текст (по горизонтали и вертикали) внутри блока div?
31 Как вертикально выровнять изображение внутри div
33 Как сделать раскрывающееся меню Twitter Bootstrap при наведении курсора, а не при нажатии
3 Невозможно отобразить строку HTML
💵 Получи $100 на хостинг на 60 дней.
Регистрируйся!

Новые вопросы

1 Как сделать так, чтобы шаблон html в таблице имел первый столбец, делящийся на 4 ячейки, а второй столбец - только на одну ячейку?
1 Как сбросить простой диалог html при повторе в Angular 16
2 Нижний колонтитул не останется внизу
1 Проблема с получением «липкого» CSS-фильтра SVG для закругленного фона текста для работы в Firefox.
1 Html/Css рабочий стол для просмотра на мобильных устройствах
1 Как настроить таргетинг на эту кнопку в условии if в ванильном JavaScript
1 Изменение содержимого div не обновляется в DOM
1 Почему оператор or не работает в цикле for?
1 Как создать прокручиваемый редактор с нумерацией строк, которая всегда совпадает со строками в текстовой области?
1 Автоматическое скрытие полосы прокрутки CSS не работает после настройки веб-кита
Все вопросы по теме html >

html

HTML (язык гипертекстовой разметки) — это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы относительно HTML должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто в паре с [CSS] и [JavaScript].

Подробнее про html...