css - 他の要素が表示されたときにアイテムが CSS で DOM 内を動き回らないようにする

Question

次のフィドルで：

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

紹介されても2A動かず、そのままの状態を保とうとしています。位置と表示のプロパティをいじってみましたが、移動せずに正しい位置を維持する方法がわかりません。 1A1B2A

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;
}

フィドルを見る

お役に立てば幸いです。