css - 当显示其他元素时，使用 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;
}

见小提琴

我希望它有所帮助。