Question

我是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>");

任何形式的帮助都将受到高度赞赏！

Answer 1

我会从这开始：

#block_contact { position: relative; }

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

尝试一下，看看它是否有任何修复，我没有任何其他想法。

Answer 2

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

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

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

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

2 个答案: