>
배경

다음 사용자 정의 입력을 고려하십시오 (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의 수량에 대해 사과하고 가능한 한 많이 제거하려고했지만 문제를 보여주기 위해 기능이 필요했습니다 ...

문제

완벽 주의자가 된 것에 대해 나를 용서해주십시오. 그러나 나는 다소 나를 괴롭히는 아주 작은 문제를 발견했고 그에 대한 해결책을 찾지 못하는 것 같습니다.

필드가 초점을 맞추고 .options-form-control  요소가 표시되면 input 를 제외한 다른 모든 내용 위에 있어야합니다.  라벨 형제). 나는 z-index 를 조정하여 이것을 달성했습니다   .field-container 내의 각 요소의 .

문제는 사용자가 다음 입력에 초점을 둔 이전 입력에 초점을 맞출 때 ( .bar 에서)   .foo 로 ), 드롭 다운이 전환되면서 input  그리고 label   .bar 내  요소, 전환중인 드롭 다운 위에 표시 ( .3s 의 경우) ).

이것이이유라는 것을 알고 있지만, 특히 다른 구성 요소 내에서 사용되기 때문에 실제로는 선택 사항이 아닌 전체 마크 업을 재구성하지 않고는이를 해결하는 방법을 생각할 수 없습니다 내 앱.

이 문제를 해결할 수있는 방법에 대한 제안이 있습니까?


  • 답변 # 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- 색인 값을 가진 요소가 왜 자식을 덮을 수 없습니까?

  • 답변 # 2

    여기로갑니다. 나는 그것이 당신의 시나리오에 대한 해결책 일 수 있다고 생각합니다. 불투명도를 사용했습니다. 아마 세련 될 수는 있지만 아이디어를 얻을 수 있습니다.

    기본적으로 "충돌적인"항목을 수행하면 사용자가 클릭 할 때 불투명도가 0입니다. "사라지고"싶지 않은 항목에 대해 더 나은 필터를 수행 할 수 있습니다. 예를 들어 클릭 한 항목의 위치와 새 초점의 위치를 ​​염두에 두어야합니다. 항목이 표시되지 않고 "아래에서 위쪽으로"이동할 때만 발생하기를 원하기 때문에

    $(document).ready(() => {
      $('input').focus(function() {
        $(this).closest('.field-container').addClass('focused');
      });
      
      $('input').blur(function() {
        $(this).closest('.field-container').removeClass('focused');
      });
      $('input').on('click', function(){
      $('input').closest('.field-container').not('.focused').attr('style', 'opacity:0');
      });
      $('input').blur(function(){
        $('input').closest('.field-container').attr('style', 'opacity:1')
      })
      
    });
    
    
    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>
    
    

관련 자료

  • 이전 regex - 배열에서 REGEXEXTRACT를 사용하여 여러 열 검색
  • 다음 벡터 ++에 큰 txt 파일을로드하는 C ++ 빠른 방법