Question

我有一个可编辑的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>

的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;
}

Answer 1

添加

position:relative;

到.note然后添加

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

文字不断推动图像

1 个答案: