css - 溢出时更改字体颜色

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%。