Начальная позиция абсолютной ссылки в текстовой области

Question

У меня есть содержимое внутри столбца начальной загрузки.Мне нужно разместить ссылку в текстовой области, как показано ниже.

и ссылка также должна состоять из своей позиции, даже если размер области текста изменяется по горизонтали или вертикали.Как мне добиться этого с помощью 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>