引导位置绝对是文本区域中的链接

Question

我在引导栏内有一些内容。我需要将链接放置在Textarea中，如下所示。

并且即使水平或垂直调整文本区域的大小，链接也应包含其位置。如何使用jquery或CSS实现此目标？

JS FIDDLE

<div class="row">
  <div class="col-sm-8">
    <a data-toggle="tooltip" data-placement="top" title="Record Feedback" role="button" class="recorded-feedback-modal">Link</a>    
    <textarea class="form-control" rows="4" spellcheck="false"></textarea>    
    <p>Test Content</p>
    <p>Test Content</p>
    <p>Test Content</p>
    </div>
</div>

CSS

.recorded-feedback-modal {
    position: absolute;
    bottom: 10px;
    right: 30px;
    z-index: 9999;
}

Answer 1

• 在textarea周围创建一个相对容器，并链接为inline-block
• 位置链接绝对在容器内部

.textarea-container {
  position: relative;
  display: inline-block;
}

.recorded-feedback-modal {
  position: absolute;
  bottom: 1em;
  right: 1em;
}

<div class="row">
  <div class="col-sm-8">
    <div class="textarea-container">
    <a data-toggle="tooltip" data-placement="top" title="Record Feedback" role="button" class="recorded-feedback-modal" href="#">Link</a>
    <textarea class="form-control" rows="4" spellcheck="false"></textarea>      
    </div>

    <p>Test Content</p>
    <p>Test Content</p>
    <p>Test Content</p>
  </div>
</div>

jsFiddle

Answer 2

您能否添加一个新的div并将a和textarea放入该div中。

.txtArea {
  position: relative
}
.recorded-feedback-modal {
    position: absolute;
    bottom: 10px;
    right: 30px;
    z-index: 1;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-8">


<div class="txtArea">
<a data-toggle="tooltip" data-placement="top" title="Record Feedback" role="button" class="recorded-feedback-modal">Link</a>
<textarea class="form-control" rows="4" spellcheck="false"></textarea>
</div>

<p>Test Content</p>
<p>Test Content</p>
<p>Test Content</p>
</div>
</div>