在另一個 div 的頂部制作 div

Question

我的目標是在這些圖表 div 上顯示信息，如下所示：

我能夠在 div 上顯示它，但問題是那些本質上沒有響應。 所以我從頭開始並再次編寫代碼來解決這個問題。

所以在我的新代碼中，當我取消注釋class kpi-box下的那些 div 時：

這就是我得到的：

我的圖表移到右側。

這應該是這樣的：

代碼片段：

  <div class="container">
    <div class="chart-holder">
      <div id="kpi-confirmed" class="kpi-box">
              <div class="label">Death</div> //<----------------- from here
              <div class="value">123</div>
              <div class="diff">12345</div>
              <div class="description"></div>
              <div id="daily_dcsd"></div>
              <div class="chart-caption">&nbsp;&nbsp;&nbsp;Daily new cases</div>        
      </div>
      <div id="test2" class="kpi-box">
<!--               <div class="label">Death</div>
              <div class="value">123</div>
              <div class="diff">12345</div>
              <div class="description"></div>
              <div id="daily_dcsd"></div>
              <div class="chart-caption">&nbsp;&nbsp;&nbsp;Daily new cases</div>  -->
              <!-- <br>        -->
      </div>

代碼和演示：

行號 1-124：

https://blockbuilder.org/ninjakx/7ff7bc1ea3e100d9a8d92aa6bcec3fb6

我知道我需要使用position absolute和position relative值，但我無法做到。 有人可以幫助我嗎？

Answer 1

由於子 css 選擇器的高度限制了框的高度，您無法調整框的所有內容。 移除子 class 的高度或降低 svg 的高度。

 .child { flex: 1 10 20%; /* explanation below */ margin-left: 1%; margin-right: 1%; /*height: 12.5vw;*/ background-color: blue; }

Answer 2

首先將所有額外信息包裝在<div>中，然后將其absolute 。

<div style="position: absolute;top: 10px;left: 10px;">
      <div class="value">123</div>
      <div class="diff">12345</div>
      <div class="description"></div>
      <div class="label">Death</div>
    </div>

Answer 3

從您的代碼中獲得

https://blockbuilder.org/ninjakx/7ff7bc1ea3e100d9a8d92aa6bcec3fb6

     flex:20px 1 1 1;
     display:flex;
     flex-direction:row;
     min-height:0;
     position: absolute;
     flex-wrap:nowrap;}```

Edit depending on the size it will give the charts when displayed ``flex:30px 1 1 1;``