通过jQuery改变绝对定位的文本div，而不改变它的位置答案

【问题标题】：Changing absolute positioned text div through jQuery, without changing it's position通过jQuery改变绝对定位的文本div，而不改变它的位置
【发布时间】：2013-06-24 02:41:05
【问题描述】：

我是 html、css 和 javascript 的新手。我想做的是：

在图像右侧添加带有一些文字的白色背景。我已将白色 bg 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>");

我们将不胜感激任何形式的帮助！

【问题讨论】：

标签： jquery css-position

【解决方案1】：

我会从这个开始：

#block_contact { position: relative; }

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

试试看能不能解决问题，我没有其他想法。

【讨论】：

【解决方案2】：

如果您只想更改文本，则在 jQuery 函数调用中不需要 <p> 标记：

$("#notes_text").html("dummy text");

如果您出于某种原因需要这些标签，那么您将需要一些 CSS 来设置 display:table-cell，就像使用 #notes_text 一样。默认情况下，<p> 标签使用display:block。

【讨论】：