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}）函数的字母显示在侧边栏中。

我应该提一下，我最初在他们自己的页面上有按钮和区域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，只是完美地堆叠在一起，所以你看起来不像它们，但这种对正常文档流程的改变使得第一个再次出现。如果你需要帮助摆脱它我可以再次查看你的代码，但你可能应该在另一个问题中这样做，因为它迄今为止偏离了你的原始问题。：d

Answer 2

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

我将span.letter修改为：

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

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

浮动中相对定位的元素留下div

2 个答案: