我有一个 <button>其中有 3 个跨度 - 每个跨度包含不同的文本。在不同的时间，由 Javascript 触发，按钮的类会发生变化。使用 CSS transitions & transform，我有一个 span 移出按钮，另一个移入。一切正常。
问题是按钮已经增长到跨度 1 + 跨度 2 + 跨度 3 的整个宽度。我希望宽度足够大以包含最大的跨度。如果所有的 span 都可以一个接一个地放置，这就可行了。
我不知道如何让 3 个 span 一个叠一个。
这是一个显示问题的 fiddle :http://jsfiddle.net/V9yTs/ (点击按钮查看变化)
编辑 这是最后的工作 fiddle :http://jsfiddle.net/XW3DY/7/
最佳答案
将 span 相互叠加的解决方案是使用 position: relative;(我看到你已经在那里了)，然后修改 span 2 和 3 的上边距，这样他们向上移动到与跨度 1 相同的位置。
这是您的 JSFiddle 的更新版本:http://jsfiddle.net/XW3DY/2/
(请注意， float 元素不能彼此重叠。这就是为什么相对定位通常用于将元素彼此重叠放置的原因。)
关于css - 如何将元素放置在彼此之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21198206/