如何在文本区域内放置一个浮动按钮？

Question

我需要做这个：

使用 Vue 框架和 postcss 预处理器。

我正在尝试一个带有 contenteditable 跨度的变体，它在这里找到 - Button inside TextArea in 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&wordwrap&html&css&xcode&focus=css" allowtransparency="true" allowfullscreen="true" style="background-color:transparent; overflow: hidden;margin: 0;" title="" frameborder="0"></iframe>

所以我将文本区域放置在带有position: relative 的div 容器中，“feedback__btn”为position: absolute，位于右下角。

更新的解决方案： https://codebrace.com/editor/b0b504fb2

向 textarea 添加 margin-bottom 将使按钮不会隐藏 textarea。我已经更新了解决方案供您参考。我希望这能解决你的问题:)。