html - 文本区域内按钮的绝对定位

Question

上图中的齿轮按钮绝对定位在 textarea 元素内，但文本与它重叠。我不想应用 padding-right 属性。我是 HTML 和 CSS 的新手。如何使用齿轮按钮阻止文本折叠。

Answer 1

我创建了一个 DEMO使用另一种方法。

我创建了一个具有相对定位的包装器元素，为其设置了边框并将其宽度设置为 300 像素。然后创建一个没有任何边框的 textarea 元素并将其宽度设置为 280px，以便将您的齿轮(绝对定位，float:right)定位在右上角，这样文本就不会与您重叠按钮。

HTML:

<div class='wrapper'>
    <textarea class='textarea'></textarea>  
    <img src='https://cdn3.iconfinder.com/data/icons/unicons-vector-icons-pack/32/settings-128.png' class='img'>
</div>

CSS:

.wrapper{
    width:300px;
    height:auto;
    border:1px solid red;
    position:relative;  

}

.textarea{
    position:relative;
    width:280px;
    height:100px;
    border:0px solid;
    resize:none

}

.img{
    float:right;
    position:absolute;
    width:20px;
    height:20px;

}