在不知道兄弟元素的位置的情况下，使元素完全位于兄弟元素的后面

Question

我有一个输入，我想在输入上添加一个标签，但除此之外我还有其他标签，我希望在影响输入的不同CSS事件上显示。

我使用相对定位来做标签的重叠效果。

但它留下了一个空间，所以我应该使用绝对定位。

但我不知道如何使用纯CSS知道输入的确切位置。

我已经看到了这个问题Bind the position of an element to another element's position但我无法使用它，因为我已经使用外部div作为我的输入，而且我需要将输入作为我的重叠标签的兄弟姐妹，和所有其他标签。

jQuery(document).ready(function($) {

  $('.text_input').focus(function(event) {

    $(this).siblings('.text_input_title').addClass('tit_f');
    $(this).siblings('.text_input_real-title').addClass('tirt_f');
    $(this).siblings('.text_input_title').removeClass('tit_b');
    $(this).siblings('.text_input_real-title').removeClass('tirt_b');
  });
  $('.text_input').focusout(function(event) {
    if ($(this).val() == '') {
      $(this).siblings('.text_input_title').addClass('tit_b');
      $(this).siblings('.text_input_real-title').addClass('tirt_b');
      $(this).siblings('.text_input_title').removeClass('tit_f');
      $(this).siblings('.text_input_real-title').removeClass('tirt_f');
    }
  });


});

/*text-input*/

.text_input_div {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  box-sizing: border-box;
}

.text_input_title {
  z-index: 49;
  position: relative;
  top: 19px;
  order: 2;
  color: #737373;
  transition: .333s;
  overflow: hidden;
  height: 19px;
}

.text_input_underline {
  order: 1;
  height: 0px;
  width: 100%;
  border-top: solid 1px #737373;
  transition: .333s;
  margin-top: 2px;
  color: #ad0b0b;
  overflow: hidden;
  font-size: 12px;
}

.text_input {
  order: 2;
  z-index: 50;
  outline: none;
  margin-bottom: 2px;
  border: none;
  flex: 1;
  box-sizing: border-box;
  transition: .333s;
  transition: lineal .333s;
  background-color: rgba(0, 0, 0, 0);
}

.text_input_real-title {
  order: 3;
  height: 0px;
  color: #737373;
  overflow: hidden;
  transition: .333s;
}

.tit_f {
  animation-name: shrink;
  animation-duration: .333s;
  animation-fill-mode: forwards;
}

.tirt_f {
  animation-name: grow;
  animation-delay: .333s;
  animation-duration: .333s;
  animation-fill-mode: forwards;
}

.text_input:focus~.text_input_underline {
  border-top-color: #0b3fad;
}

.text_input:focus~.text_input_real-title {
  color: #0b3fad;
}

.text_input:invalid~.text_input_underline {
  border-top-color: #ad0b0b;
  padding-bottom: 2px;
  height: auto;
}

.text_input:invalid~.text_input_real-title {
  color: #ad0b0b;
}

.tit_b {
  height: 0;
  animation-name: grow;
  animation-delay: .333s;
  animation-duration: .333s;
  animation-fill-mode: forwards;
}

.tirt_b {
  animation-name: shrink;
  animation-duration: .333s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes shrink {
  from {
    height: 19px;
  }
  to {
    height: 0;
  }
}

@-webkit-keyframes grow {
  from {
    height: 0;
  }
  to {
    height: 19px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="text_input_div">
    <input type="text" id="init_chat_input" class="text_input" pattern="[0-9a-zA-Z_ ]*">
    <div class="text_input_underline"><span>Only letters, numbers and "_"</span></div>
    <span class="text_input_real-title">Username</span>
    <span class="text_input_title">FUsername</span>
  </div>
</div>

Jsfiddle