css - 当显示其他元素时，使用 CSS 防止元素在 DOM 中四处移动

Question

在下面的 fiddle 中:

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

希望对你有帮助。