浮动左div中的相对定位元素

Question

我有以下css：

.contents{
    width: 70%;
    float: right;
}

.sidebar{
    width: 25%;
    float: right;
}

div.area {
    position: relative;
    border: 1px solid;
}

span.letter {
    position: absolute;
    font-family: mono;
    font-size: 14;
}

以及下面的html结构：

<div class="sidebar">

</div>
<div class="content">
    <button id="button">>>></button>
    <div id="area">
        <span class="letter"></span>
        <span class="letter"></span>
        <span class="letter"></span>
        ...
    </div>
</div>

但是，使用 jquery.animate({left: ?px, top: ?px}) 函数定位的字母会显示在侧边栏中。

我应该提到，我最初在他们自己的页面上有按钮和 area-div，我没有遇到问题。

如何将区域 div 中的字母取回？

编辑：这是一个 jsfiddle 版本：http://jsfiddle.net/herrturtur/mPBgg/

Answer 1

I think I managed to produce something like what you wanted.

布赖恩是对的。这些字母出现在那里是因为您将它们放在 javascript 中的绝对定位中，并且您无法在不弄乱 JS 的情况下修复它。您之前通过 JQuery 的 .offset 绝对定位了该字母，但是完全删除该定位并让它们使用position: block（就在顶部）让它们到达正常位置似乎要简单得多彼此，所以这就是我所做的：

CSS：

div#area {   //<--- you had a '.' instead of '#' here. Irrelevant, but I thought I'd mention it
    position: relative;
    border: 1px solid;
}

span.letter {
    display: block;   //<--- added this
    font-family: mono;
    font-size: 14;
}

JS：

/*
 * Draws one letter to the screen at the specified position.
 */
function createLetter(letter){    //removed extraneous parameter
    var letter = $('<span class="letter">' + letter + '</span>');
    $("#area").append(letter);
    //  letter.offset(position);  Commented this out to leave letters where they are
    return letter;
}

由于我将position 参数删除到createLetter 方法中，我还更新了在createWord 方法中调用它的一行代码。您似乎经常传递一个名为 position 的参数，如果您应用我建议的更改，我相信您将能够将其从多种方法中提取出来，以使您的代码更加简洁。

如果您需要它们再次水平移动，您可能只需使用 JS 删除 position: block 并添加一些填充来调整它。正如我所说，您的问题似乎更适合正常定位，我认为这是要走的路。

您可能还注意到有一个以前没有的额外 J。之前实际上有 2 个 J，只是完美地堆叠在一起，因此您看不到它们，但是对正常文档流的这种更改使第一个 J 重新出现。如果您需要帮助摆脱它，我可以再次查看您的代码，但您可能应该在另一个问题中这样做，因为到目前为止它与您在这个问题中的原始问题相去甚远。 :D

Answer 2

我认为问题在于 span.letter 的 CSS 有一个绝对位置，它将其定位在整个页面上，而不是本地块。

我将 span.letter 修改为：

span.letter {
    font-family: mono;
    display: block;
}

这将它们定位在区域块中，这是我认为您正在寻找的。​​p>