Относительно расположенные элементы в поплавке оставили 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. анимированная ({left:? px, top:? px}) функция, отображаемая на боковой панели.

Следует упомянуть, что у меня первоначально была кнопка и область-div на их собственной странице, где проблема не возникала для меня.

Как получить письма обратно в область div?

Edit: Вот jsfiddle версия: http://jsfiddle.net/herrturtur/mPBgg/

Answer 1

Я думаю, что проблема в том, что CSS для span.letter имеет место абсолютное, которое позиционирует его против всей страницы, а не локальный блок.

Я изменил span.letter быть:

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

Это расположено их в блоке области, которая является то, что я думаю, что вы ищете.

Answer 2

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

Брайан был прав. Буквы появляются там, потому что вы размещаете их там с абсолютным позиционированием в javascript, и вы не можете сделать это, чтобы не исправить это, не возившись с JS. У вас было письмо абсолютно позиционировалось раньше, чем через JQuery's .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, и если вы примените это изменение, я предположил, что считаю, что вы сможете вывести его из нескольких методов, чтобы сделать ваш код немного более кратким.

Если вам нужно, чтобы они снова шли по горизонтали, вы, возможно, просто удалите position: block с помощью JS и, возможно, добавьте некоторые дополнения, чтобы настроить его. Как я уже сказал, ваша проблема казалась гораздо лучше подходящей для нормального позиционирования, и я думаю, что это путь.

Возможно, вы также заметили, что есть дополнительный J, которого раньше не было. На самом деле на самом деле было 2 J ранее, они просто были сложены друг на друга, так что вы не могли казаться ими, но это изменение в обычном потоке документов делает первый снова. Если вам нужна помощь, чтобы избавиться от него, я снова просмотрю ваш код, но вы, вероятно, должны сделать это в другом вопросе, поскольку он до сих пор отвлечен от исходной проблемы в этом.: D