Используя CSS и z-index, как вы можете поместить элемент, который является дочерним по отношению к дочернему элементу, позади верхнего родительского элемента? - PullRequest
Новая
       23

Используя CSS и z-index, как вы можете поместить элемент, который является дочерним по отношению к дочернему элементу, позади верхнего родительского элемента?

0 голосов
/ 17 апреля 2019

В настоящее время я создаю меню, которое будет использоваться в качестве главной навигации в среде нашего портала. К сожалению, из-за характера бизнес-контроля и отсутствия гибкости при изменении корпоративного кода - мы ограничены в работе с CSS.

У меня проблема в том, что меню, которое / вылетает из выпадающего меню, появляется перед родительским элементом. Я хочу иметь такое поведение: когда вы наводите курсор на элемент с всплывающим меню - он выскользнет как ящик - из-за [позади] родителя.

Теперь это похоже на структуру меню suckerfish: 

<ul>
   <li>My Item
      <ul>
         <li>drop 1</li>
         <li>drop 2</li>
      </ul>
   </li>
   <li>My other Item
      <ul>
         <li>Sub1</li>
         <li>Sub2
            <ul>
               <li>Flyout1</li>
               <li>Flyout2</li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

Когда вы раскрываете меню «Flyout1 / Flyout2», оно появляется перед меню Sub1 / Sub2.

Вот рабочий пример на codepen:

https://codepen.io/barrychapman/pen/YMYoRd

Я испробовал все приемы, установив непрозрачность на 0,99, -1 z-index и т. Д.

...