Как поместить плавающую кнопку внутри текстовой области?

Question

Мне нужно сделать следующее:

Использование инфраструктуры Vue и препроцессора postcss.

Я пробовал вариант с contenteditable span, который был найден здесь - Кнопка внутри TextArea в HTML однако кнопка не перемещается, текст просто скрывается под кнопкой, как будто имеет абсолютное позиционирование:

<div class="feedback__textarea">
  <app-btn theme="deepwater" class="feedback__btn">Отправить</app-btn>
  <span contenteditable="true"
        class="feedback__input"
        id="feedback-form-message"
        name="message"></span>
</div>

.feedback__textarea {
    position: relative;
    height: 150px;
    background-color: var(--white);
}

.feedback__textarea .feedback__input {
    position: relative;
    top: -60px;
    display: inline-flex;
    width: 100%;
    height: 150px;
    color: var(--dark-grey);
    word-break: break-all;

    &:focus {
        outline: none;
    }
}

.feedback__btn {
    float: right;
    position: relative;
    top: 90px;
}

Answer 1

Вы, вероятно, ожидаете этого:

https://codebrace.com/editor/b09138c60

<iframe width="100%" height="300" src="//codebrace.com/embed/b09138c60/?12px&amp;wordwrap&amp;html&amp;css&amp;xcode&amp;focus=css" allowtransparency="true" allowfullscreen="true" style="background-color:transparent; overflow: hidden;margin: 0;" title="" frameborder="0"></iframe>

Таким образом, я поместил текстовую область в контейнер div с position: relative с «feedback__btn» как position: absolute, расположенным в правом нижнем углу.

Обновленное решение: https://codebrace.com/editor/b0b504fb2

Добавление поля margin-bottom в textarea предотвратит скрытие кнопки textarea.Я обновил решение для вашей справки.Я надеюсь, что это решит вашу проблему :).