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

在下面的小提琴中：

我试图保持

2A

在它所在的位置，在引入

1A

或

1B

时不移动。我尝试过使用位置和显示属性，但不知道如何在不移动的情况下将

2A

保持在正确的位置

CSS:

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>

标题：

1A
1B
2A
切换1值
切换1可见性

---

如何使

2A

保持原位

您可以使用绝对位置：

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

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

---

我希望它能有所帮助。

没有绝对定位，我有什么办法可以做到这一点吗？容器中的其他元素可能会更改大小，因此我希望以某种方式相对于父元素定位：/scratch-I通过将父元素设置为position:relative，使其与代码一起工作。谢谢：）同时在元素上应用

浮点

和

位置：绝对

（或

固定

）是没有意义的。

位置

覆盖任何

浮动

行为。

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

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