自定义表单字段的Z索引问题（选择）

Question

背景

考虑以下定制输入（忽略JS）：

$(document).ready(() => {

  $('input').focus(function() {
    $(this).closest('.field-container').addClass('focused');
  });
  
  $('input').blur(function() {
    $(this).closest('.field-container').removeClass('focused');
  });
  
});

html, body {
  background: #eee;
}

.field-container {
  display: flex;
  padding: 12px 10px 0;
  position: relative;
  transition: z-index 0s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
  width: 50%;
  z-index: 1;
}

.field-container.focused {
  transition-delay: 0s;
  z-index: 11;
}

.field-container.focused:before {
  opacity: 1;
  transform: scaleX(1);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: border, opacity, transform;
}

.field-container.focused label {
  font-size: 15px;
  opacity: 1;
  pointer-events: auto;
  top: 0;
}

.field-container.focused .select-form-control .options-form-control {
  opacity: 1;
  visibility: visible;
}

.field-container:before,
.field-container:after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  transition: border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
  will-change: border, opacity, transform;
}

.field-container:before {
  background: #000;
  height: 2px;
  opacity: 0;
  transform: scaleX(0.12);
  z-index: 11;
}

.field-container:after {
  background: #ccc;
  height: 1px;
  z-index: 10;
}

.field-container label {
  color: #ccc;
  font-size: 21px;
  font-weight: 500;
  pointer-events: none;
  position: absolute;
  top: 25px;
  transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 0.3s;
  z-index: 10;
}

.field-container .select-form-control {
  display: flex;
  position: relative;
  width: 100%;
  z-index: 9;
}

.field-container input {
  background: none;
  border: none;
  color: #000;
  cursor: text;
  display: block;
  flex: 1;
  font-size: 21px;
  font-weight: 500;
  height: 56px;
  line-height: 56px;
  margin: 0;
  min-width: 100px;
  outline: none;
  padding: 0;
  text-rendering: auto;
  transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: font-size, padding-top, color;
  word-spacing: normal;
  -webkit-appearance: textfield;
  -webkit-rtl-ordering: logical;
  -webkit-writing-mode: horizontal-tb !important;
}

.field-container .select-form-control .options-form-control {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 23px 71px 0 rgba(204, 204, 204, 0.09);
  left: -20px;
  opacity: 0;
  padding-top: 90px;
  position: absolute;
  right: -20px;
  top: -22px;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  z-index: -1;
}

.field-container .select-form-control .options-form-control ul {
  list-style-type: none;
  max-height: 200px;
  overflow: auto;
  padding: 0 0 10px;
  margin: 0;
}

.field-container .select-form-control .options-form-control ul li {
  color: #000;
  cursor: pointer;
  display: block;
  font-size: 21px;
  font-weight: 500;
  line-height: 2.12;
  padding: 0 20px;
  z-index: -1;
  margin: 0;
}

.field-container .select-form-control .options-form-control ul li:hover {
  background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field-container foo">
  <label>Foo</label>
  <div class="select-form-control">
    <input name="foo" autocomplete="new-password" readonly="readonly">
    <div class="options-form-control">
      <ul>
        <li class="active">Foo</li>
        <li class="">Bar</li>
        <li class="">Foobar</li>
      </ul>
    </div>
  </div>
</div>

<div class="field-container bar">
  <label>Bar</label>
  <div class="select-form-control">
    <input name="bar" autocomplete="new-password" readonly="readonly">
    <div class="options-form-control">
      <ul>
        <li class="active">Foo</li>
        <li class="">Bar</li>
        <li class="">Foobar</li>
      </ul>
    </div>
  </div>
</div>

我对CSS的数量表示歉意，我尝试尽可能地去除CSS，但是需要功能以说明问题。

问题

原谅我有点完美主义者，但我注意到一个非常小的问题困扰着我，我似乎无法解决这个问题。

当该字段成为焦点并显示.options-form-control元素时，它必须位于所有其他内容之上（除了input和标签同级元素之外）。我已经通过调整内z-index的每个元素实现了这一点.field-container。

问题是，当用户将焦点从下一个输入集中到上一个输入（从.bar到.foo）时，当元素中的下拉菜单过渡时，元素中input和label中的.bar元素将显示在要过渡的下拉菜单上方（for .3s）。

我知道为什么要这样做，但是我想不出解决方法，尤其是在不重构整个标记的情况下，这并不是一个真正的选择，因为它在我的应用程序的其他组件中使用。

有人对我如何解决这个问题有任何建议吗？

Answer 1

主要问题是由于使用了大量z-index嵌套元素，这会让您在处理堆叠上下文时感到头疼。为了避免这种不好的影响，我删除了很多z-index属性，只保留了需要的属性。

你只会找到4个z-index

$(document).ready(() => {

  $('input').focus(function() {
    $(this).closest('.field-container').addClass('focused');
  });
  
  $('input').blur(function() {
    $(this).closest('.field-container').removeClass('focused');
  });
  
});

html, body {
  background: #eee;
}

.field-container {
  display: flex;
  padding: 12px 10px 0;
  position: relative;
  width: 50%;
}


.field-container.focused:before {
  opacity: 1;
  transform: scaleX(1);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: border, opacity, transform;
  z-index: 11; /* Here */
}

.field-container.focused label {
  font-size: 15px;
  opacity: 1;
  pointer-events: auto;
  top: 0;
  z-index: 10; /* Here */
}

.field-container.focused .select-form-control .options-form-control {
  opacity: 1;
  visibility: visible;
}

.field-container:before,
.field-container:after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  transition: border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
  will-change: border, opacity, transform;
}

.field-container:before {
  background: #000;
  height: 2px;
  opacity: 0;
  transform: scaleX(0.12);
}

.field-container:after {
  background: #ccc;
  height: 1px;
}

.field-container label {
  color: #ccc;
  font-size: 21px;
  font-weight: 500;
  pointer-events: none;
  position: absolute;
  top: 25px;
  transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 0.3s;
}

.field-container .select-form-control {
  display: flex;
  position: relative;
  width: 100%;
}

.field-container input {
  background: none;
  border: none;
  color: #000;
  cursor: text;
  display: block;
  flex: 1;
  font-size: 21px;
  font-weight: 500;
  height: 56px;
  line-height: 56px;
  margin: 0;
  min-width: 100px;
  outline: none;
  padding: 0;
  text-rendering: auto;
  transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: font-size, padding-top, color;
  word-spacing: normal;
  -webkit-appearance: textfield;
  -webkit-rtl-ordering: logical;
  -webkit-writing-mode: horizontal-tb !important;
}

.field-container .select-form-control .options-form-control {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 23px 71px 0 rgba(204, 204, 204, 0.09);
  left: -20px;
  opacity: 0;
  padding-top: 90px;
  position: absolute;
  right: -20px;
  top: -22px;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  z-index: 2; /* Here */
}

.field-container .select-form-control .options-form-control ul {
  list-style-type: none;
  max-height: 200px;
  overflow: auto;
  padding: 0 0 10px;
  margin: 0;
}

.field-container .select-form-control .options-form-control ul li {
  color: #000;
  cursor: pointer;
  display: block;
  font-size: 21px;
  font-weight: 500;
  line-height: 2.12;
  padding: 0 20px;
  z-index: -1; /* Here */
  margin: 0;
}

.field-container .select-form-control .options-form-control ul li:hover {
  background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field-container foo">
  <label>Foo</label>
  <div class="select-form-control">
    <input name="foo" autocomplete="new-password" readonly="readonly">
    <div class="options-form-control">
      <ul>
        <li class="active">Foo</li>
        <li class="">Bar</li>
        <li class="">Foobar</li>
      </ul>
    </div>
  </div>
</div>

<div class="field-container bar">
  <label>Bar</label>
  <div class="select-form-control">
    <input name="bar" autocomplete="new-password" readonly="readonly">
    <div class="options-form-control">
      <ul>
        <li class="active">Foo</li>
        <li class="">Bar</li>
        <li class="">Foobar</li>
      </ul>
    </div>
  </div>
</div>

z-index有关堆叠上下文的更多详细信息的相关问题：

为什么具有 z-index 值的元素不能覆盖其子元素？