Javascript 文本不断向下推图像

我有一个可编辑的div类，在div的右上角有一个图像。但是，当我输入文本，文本进入下一行时，图像从右上角移动到文本下方。有办法解决吗

HTML

<div class="note" contenteditable="true"> <span id='close' contenteditable='false' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
    <img src="images/close.png" height="25" width="25" align="right" style="vertical-align: top; float: right"/>
</span></div>

CSS

.note {
    width: 280px;
    height: 100px;
    padding-top: 40px;
    margin-top: 60px;
    margin-left: 35px;
    word-break: break-word;
    font-family: Note;
    font-size: 30px;
    background-image: url("images/stickynote.png");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

加

注意，然后添加

.note img{
    position: absolute;
    top: 0px;
    right: 0px;
}

检查：编辑：问题已经解决，没有注意到。还有笔吗

position:relative;

.note img{
    position: absolute;
    top: 0px;
    right: 0px;
}