文本不断向下推图像

text keeps pushing image down

本文关键字：下推 图像 文本      更新时间：2023-09-26

我有一个可编辑的div类，并且我在div的右上角有一个图像。但是，当我输入文本并将文本继续到下一行时，图像从右上角移动到文本下方。有办法解决这个问题吗? 

<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>
Javascript

$(function() {
    $(".note").resizable();
    $(".note").keyup(function(){
        $(this).css('height' , '100%');
    });
    $(".note").draggable()
    .click(function() {
        $(this).draggable( {disabled: false});
    })
    .dblclick(function() {
        $(this).draggable({ disabled: true });
    });                                      
});
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;
}

add 

position:relative;

到。note，然后加上

.note img{
    position: absolute;
    top: 0px;
    right: 0px;
}
相关文章：