Блог

У меня есть div, который я использую в качестве заголовка / навигационного меню. У этого div есть падающая тень. При наведении курсора мыши на пункт меню «Конфигурация» появляется выпадающее меню. Я хочу, чтобы это выпадающее меню отображалось за тенью. Я использую объявленные позиции и z-индекс для всех элементов. Выпадающий список имеет z-индекс 99, а заголовок div равен индексу 100. Выпадающий список не будет отображаться за заголовком div.

Я использую Gatsby, React и Radium. Синтаксис приведенного ниже стиля заключается в том, что я использую объект «styles» в Javascript для применения стилей.

 headerDiv: {
    background: 'white',
    marginBottom: '1.45rem',
    paddingLeft: '10px',
    paddingRight: '10px',
    boxShadow: '0px 6px 6px rgba(0,0,0,0.2)',
    zIndex: '100',
    position: 'relative'
},
dropdownMenu: {
    opacity: '1',
    position: 'absolute',
    top: '95%',
    left: '0',
    zIndex: '99',
    padding: '20px 100px 0px 20px',
    whiteSpace: 'nowrap',
    float: 'left',
    minWidth: '160px',
    margin: '2px 0 0',
    fontSize: '12px',
    textAlign: 'left',
    listStyle: 'none',
    backgroundColor: 'white',
    backgroundClip: 'padding-box',
    boxShadow: '0 6px 12px rgba(0,0,0,0.175)'
}
 

Я решил это с помощью обходного пути. Я отключил z-индекс для всех элементов. Затем я создал пустой div и дал ему тень. Я присвоил этому div z-индекс 99, а меню навигации по заголовку z-индекс 99 (поэтому он отображается за пустым div). Теперь все работает так, как задумано.