Как я могу правильно использовать z-index, чтобы не допустить наложения глючных выпадающих меню? - PullRequest
Новая
       7

Как я могу правильно использовать z-index, чтобы не допустить наложения глючных выпадающих меню?

0 голосов
/ 12 января 2019

Я нашел выпадающее меню с хорошим дизайном (https://codepen.io/sammurphey/pen/BQvZbq)), которое я хотел бы использовать на своем веб-сайте. К сожалению, выпадающие списки дают некоторое ошибочное перекрытие при размещении друг под другом.

Вот ручка, чтобы изобразить проблему: https://codepen.io/PLY51/pen/jXQKxR

А вот соответствующий CSS: 

html, body {
  align-items: center;
  background: #e8e8e8;
  box-sizing: border-box;
  color: #666;
  cursor: default;
  font-family: sans-serif;
  height: 100%;
  justify-content: center;
  margin: 0;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
* {
  box-sizing: inherit;
  cursor: inherit;
  transition-duration: 0.2s;
  transition-property: none;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
label.field {
  border-radius: 2px;
  color: #666;
  display: block;
  margin: 16px;
  max-width: 300px;
  padding: 8px;
  opacity: 0;
  position: relative;
  transition-property: opacity;
  z-index: 1;
}
label.field span {
  color: inherit;
  display: block;
  font-size: 16px;
  height: 20px;
  line-height: 20px;
  left: 9px;
  pointer-events: none;
  position: absolute;
  top: 32px;
  transform: scale(1) translateY(0);
  transition-property: color, font-size, top;
  z-index: 1;
}
label.field span.required::after {
  color: inherit;
  content: "*";
  display: block;
  height: 20px;
  left: -20px;
  line-height: 20px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 20px;
}
.error label.field span {
  color: #f02318;
}
label.field .psuedo_select {
  background: rgba(255, 255, 255, 0);
  position: relative;
  border-color: #666;
  border-style: solid;
  border-width: 0 0 2px 0;
  color: #666;
  cursor: pointer;
  font-size: 20px;
  height: 24px;
  line-height: 24px;
  margin: 24px 32px 0 0;
  min-width: 250px;
  padding-top: 24px;
  outline: 0;
  z-index: 1;
}
label.field .psuedo_select::after {
  background: url("data:image/svg+xml;utf8,<svg fill='#666' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'> <path d='M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z'/> <path d='M0-.75h24v24H0z' fill='none'/> </svg>"), no-repeat;
  content: "";
  height: 24px;
  width: 24px;
  position: absolute;
  top: 0;
  right: 0;
  transition-property: background;
}
label.field .psuedo_select .selected {
  height: 24px;
  left: 1px;
  line-height: 24px;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: translateY(24px);
  transition-property: opacity, transform;
  will-change: transform;
}
label.field .psuedo_select ul {
  background: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  display: block;
  height: 0;
  list-style: none;
  margin-top: 2px;
  opacity: 0;
  overflow: hidden;
  padding: 0 1px;
  pointer-events: none;
  transition-property: height, opacity;
  width: 100%;
  z-index: 2;
}
label.field .psuedo_select ul li {
  height: 32px;
  padding: 8px 4px;
}
label.field .deselect {
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: -1;
}
label.field.focused {
  color: #007bed;
}
label.field.focused .psuedo_select {
  border-color: #007bed;
}
label.field.focused .psuedo_select::after {
  background: url("data:image/svg+xml;utf8,<svg fill='#007BED' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'> <path d='M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z'/> <path d='M0-.75h24v24H0z' fill='none'/> </svg>"), no-repeat;
}
label.field.focused .psuedo_select ul {
  opacity: 1;
  pointer-events: all;
}

Как вы можете видеть, выпадающее меню прекрасно работает, когда размещается исключительно (что эквивалентно нижнему выпадающему меню), но если вы поместите другое выпадающее меню под первым, параметры первого будут перекрываться вторым выпадающим списком. глючит путь.

Я знаю, что z-index работает только в том случае, если элементы имеют свойство position и что необходимо учитывать контекст размещения, но, к сожалению, я не настолько знаком с CSS и был бы рад, если бы кто-нибудь дал мне подсказку, как решить эту проблему проблема.

Любая помощь приветствуется. Спасибо!

1 Ответ

0 голосов
/ 12 января 2019

Вот функция: 

$('.psuedo_select').click(function()    {

$(".field").css("z-index", "1");
$(this).closest(".field").css("z-index", "2");

});
...