这是由于输入的处理方式造成的。input-element中的文本字段被拉伸以适应框的大小。在本例中为34px。因此修复方法是增加div的行高以匹配输入的34px。

.wrapper {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-family: Verdana!important;
  font-size: 24px;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  z-index: 2;
  position: relative;
}

.underlayer {
  top: -48px;
  line-height: 34px;
  z-index: 1;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
}

<div class="wrapper">
  <input type="text" value="20-123" class="box top">
  <div class="box underlayer">20-123-20</div>
</div>

您的字体有问题。衬层使用一种字体，另一种使用另一种字体。
我还添加了一个字体大小，并隐藏第二个框，这样您就可以移动底层的顶部位置，以匹配顶部的文本。
这可能不是最好的方式，但它的工作。

.wrapper {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-size: 24px;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  font-family: sans-serif;
  z-index: 2;
  position: relative;
}

.underlayer {
  font-family: sans-serif;
  font-size: 24px; 
  top: -44px;
  left: 1px;
  z-index: 1;
  border: 0px solid #cccccc;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
}

<div class="wrapper">
  <input type="text" value="20-123" class="box top">
  <div class="box underlayer">20-123-20</div>
</div>

你把underlayer从div改为input。它把第二个div的字体改为输入使用的字体。因为underlayer的z轴较低，所以用户永远不会选择它，不，它不会产生任何危险。你还把第二个输入的显示设置为block。
不幸的是，我不知道最初为什么会发生，所以我无法解释。

.wrapper {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-size: 24px;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  z-index: 2;
  position: relative;
}

.underlayer {
  top: -48px;
  z-index: 1;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
   display: block;
   tabindex: -1;
}

<div class="wrapper">
  <input type="text" value="20-123" class="box top">
  <input class="box underlayer" value="20-123-20">
</div>