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

Question

我需要这样做：

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

我正在尝试一个可编辑范围的变量，该变量在此处找到-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&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

在textarea底部添加margin-bottom将使按钮无法隐藏textarea。我已经更新了解决方案，以供您参考。我希望这可以解决您的问题:)。