如何将文本放置在边界框的顶部答案

【问题标题】：How to place text at the top of the bounding box如何将文本放置在边界框的顶部
【发布时间】：2020-11-16 11:54:48
【问题描述】：

我有一个标记图像的代码，我在图像上绘制了一个边界框并在文本区域中输入标记名。我想做的是将标记名放在边界框上。

我在下面附上了标签窗口的图片：

在上图中，显示了边界框和标签。在文本区域中输入的标签必须放在边界框上。我被困在这部分。我不知道如何处理这个问题。

我已附上以下代码：

var render = document.querySelector('#tags');
var btnset = document.querySelector('#settag');
var tags = [];
var nameTag = document.querySelector('#name_tag');

var $kids = $('#tags');
var $selected = $kids.children();
if ($selected.length >= 1) {
  nameTag.remove();
}

btnset.addEventListener('click', () => {
      var areas = $('img#img01').selectAreas('areas');
      displayAreas(areas);
      var color = ((1 << 24) * Math.random() | 0).toString(16);
      console.log(nameTag.value);
      render.innerHTML = `<div class="tag" style="border:solid 1px #${color};"><i class='fa fa-eye' aria-hidden='true'></i><i class='fa fa-trash-alt' aria-hidden='true'></i>${ nameTag.value}`

.tags {
  width: 100%;
  float: left;
  display: inline;
  margin-bottom: 25px;
}

.dynamic_text {
  z-index: 9999;
  color: #f00;
  text-transform: capitalize;
  position: absolute;
}

.imagearea {
  display: flex;
  flex-direction: column;
  float: left;
  max-width: 100%;
}

#img01 {
  position: relative;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imagearea" class="imagearea">
  <div class='dynamic_text' style='display:none;'></div>
  <img class="modal-content" id="img01" src="fashion.jpg">
</div>
<div class="text_container">
  <br>
  <div class="img_text"></div>
  <div class="input_tag">
    <span class="right_sec_text">Select a region from the picture</span>
    <div class="error"></div>
    <div class="tags" id="tags"></div>
    <div class="input_box">
      <input type="text" name="tags" id="name_tag" class="input_textbox">
      <button id="settag" class="btn_settag">Set Tag</button>
    </div>
  </div>
</div>

谁能帮我解决这个问题，将文本放在边界框上。

【问题讨论】：

你能把它放在像codesandbox.io 这样我们可以玩吗？例如，它缺少选择区域插件。

标签： javascript html css bounding-box

【解决方案1】：

这是我用来在边界框外放置文本的一些 Css。 css 中的技巧是使用负的 margin-top 值。

.cpSubBox{
    border: 1px solid #000;
    margin:15px;
    background-color: #122f2b;
}

.cpSubBox h4{
    text-align: center;
    margin-top: -10px;
    margin-bottom: 5px;
    height: 20px;
    line-height: 20px;
    font-size: 15px;
    letter-spacing: 1px;
    background-color: transparent;
}

【讨论】：