Предотвратить элементы переместились в DOM с помощью CSS, когда другие элементов которые будут отображаться

Question

В следующей скрипке:

http://jsfiddle.net/LkqTU/10002/

Я пытаюсь держать 2A, где она есть, без перемещения 1A или 1B являются представил. Я пробовал играть с позициями и свойствами отображения, но не могу понять, как сохранить 2A прямо там, где он не движется.

CSS:

.first { 
    float: right; 
    position: relative; 
    bottom: 30px; 

} 
.second { 
    float: right; 
    position: relative; 
    left: 24px; 
} 
.container { 
    width: 170px; 
} 

HTML:

<div class="container"> 
    <p>title:</p> 
    <input> 
     <!-- ko if: showTop --> 
    <span data-bind="if: showFirst"> 
      <i class="first">1A</i> 
    </span> 
    <span data-bind="if: !showFirst()"> 
      <i class="first">1B</i> 
    </span> 
     <!-- /ko --> 
    <span data-bind="if: showSecond"> 
      <i class="second">2A</i> 
    </span> 

    <button data-bind="click: toggleFirst">toggle 1 value</button> 
    <button data-bind="click: toggleFirstVisibility">toggle 1 visibility</button> 
    <p data-bind="text: showFirst"></p> 
    <p data-bind="text: showSecond"></p> 
</div> 

Как я могу сделать 2A оставаться на месте?

Answer 1

Вы можете использовать абсолютное положение:

.first {  
    position: absolute; 
    top: 15px; 
    left: 160px; 

} 
.second { 
    position: absolute; 
    left: 160px; 
} 
.container { 
    width: 170px; 
} 

see fiddle

Я надеюсь, что это помогает.