溢出时更改字体颜色

Question

这是我试图达到这个效果的地方： http://www.smalldot.agency/ccren/goals-page/

随着“val”栏的宽度增加，它应该与“当前”文本重叠（（与“val”文本相同，但颜色不同））。我可以将“current”的副本强制放在“val”元素的顶部，但我不能让它停留在下面。

如果我将“current”p 类放在“val”div 类下方，“current”中的文本会显示在进度条的南边，而不是在它的下方。

此外，z-index：0；似乎没有采取任何措施来解决问题。

HTML：

<div class="progdiv" style="width:100%;">
    <p class="current">1,234</p>
    <div class="val" style="width:3%;">1234</div>
</div>

CSS

.val {
  height:100%;
  border-radius:3px;
  line-height: 1.5em;
  font-size: 12pt;
  background: #019BA9!important;
  text-align: left!important;
  vertical-align: center;
  -webkit-box-shadow: 3px 3px 2px #bbbbbb;
  overflow:hidden;
}

.progdiv {
  background-color: #FFFFFF!important;
  height: 1.5em;
  text-align: right;
  vertical-align: center;
  border: solid 1px #eeeeee;
  border-radius: 3px;
  -webkit-box-shadow: inset 3px 3px 2px #bbbbbb!important;
  text-align: left!important;
  overflow: hidden!important;
}

.current {
  text-indent: 6px;
  height:100%;
  border-radius:3px;
  font-size: 12pt;
  line-height: 1.5em;
  text-align: left!important;
  vertical-align: center;
  color: #019BA9!important;
  position:absolute!important;
  text-align: left!important;
  z-index: 0;
}

Answer 1

只需将position: absolute; 添加到.val CSS。同时从.val 和.current CSS 中删除height:100%。