垂直堆叠的小部件

Question

我正在尝试创建一个可显示可变数量图标的小部件栏。我可以使用CSS精确地将1个小部件准确地放置在我想要的位置，但是当我想将几个小部件彼此堆叠时，我一直遇到问题。

发生的事情是：

• A：图标彼此完全重叠或

• B：他们得到了 压成很小的尺寸，以致它们不再可见。

我们欢迎一些指针。

我要实现的目标：

我写的是

.message-bubble {}

.message-bubble .input {
  border: 1px solid #EFEEEE;
  border-radius: 20px 20px 20px 20px;
}

.message-bubble .input:focus {
  border: 1px solid #EFEEEE;
  border-radius: 20px 20px 20px 20px;
}

.message-bubble .widgets {
  position: absolute;
  top: 15px;
  right: 15px;
  overflow: visible;
  display: flex;
  align-items: center;
}

.message-bubble .widgets li {
  list-style-type: none;
}

.widget-icon {
  position: absolute;
  background: white;
  height: 30px;
  width: 30px;
  border: 1px solid #EFEEEE;
  border-radius: 50px;
}

.widget-icon i {
  position: relative;
  top: 25%;
  left: 25%;
}

<div class="row">
  <div class="col-md-12">
    <div class="message-bubble">
      <div class="form-group">
        <div class="widgets">
          <ul>
            <li><span class="widget-icon"><i class="ti-close"></i></span></li>
            <li><span class="widget-icon"><i class="ti-close"></i></span></li>
          </ul>
        </div>
        <textarea rows="5" class="input form-control border-input input-child" style="height: auto" placeholder=" " name="input_01" maxlength="2000" required=""></textarea>
        <small class="form-text text-muted">Max 2000 characters.</small>
      </div>
    </div>
  </div>
</div>