当显示其他元素时，使用 CSS 防止项目在 DOM 中移动

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

希望对你有帮助。