jquery - 通过jQuery更改绝对定位的文本div，而不改变它的位置

Question

我对 html、css 和 javascript 很陌生。我想做的是:

在图像的右侧添加带有一些文本的白色背景。我已将白色背景 div 和文本定位为绝对位置。

到目前为止，我的做法是正确的，但是当我通过 jquery 函数更改文本时，它会将文本 div 移动到其正常位置(如果我不将其设置为绝对位置，则应该如此)。

这是我的代码:

HTML:

    <div id="block_contact" class="block_contact">  
    <img id="notesImg" src="images/love_notes/1.jpg" onload=""/> 
    <div id="white_bg_right">
    </div>
    <div id="notes_text_div">
    <p id="notes_text">What a pleasant surprise!</p>
    </div>

CSS:

    #white_bg_right {
    width:240px;
    height:362px;
    background-color:#ffffff;
    opacity:0.5;

    position:absolute;
    top:16px;
    left:329px;

    }

    #notes_text_div {
    width:210px;
    height:362px;
    position:absolute;
    left:344px;

    }
    #notes_text{
    width:210px;
    height:362px;

    display:table-cell;
    vertical-align: middle;
    }

jQuery 函数:

$("#notes_text").html("<p>dummy text</p>");

任何形式的帮助将不胜感激!

Answer 1

我会从这个开始:

#block_contact { position: relative; }

任何绝对定位的子元素都将从#block_contact的左上角开始，而不是从窗口的左上角开始。

尝试一下，看看是否可以解决任何问题，我没有任何其他想法。