css - 如何将元素放置在彼此之上

Question

我有一个 <button>其中有 3 个跨度 - 每个跨度包含不同的文本。在不同的时间，由 Javascript 触发，按钮的类会发生变化。使用 CSS transitions & transform，我有一个 span 移出按钮，另一个移入。一切正常。

问题是按钮已经增长到跨度 1 + 跨度 2 + 跨度 3 的整个宽度。我希望宽度足够大以包含最大的跨度。如果所有的 span 都可以一个接一个地放置，这就可行了。

我不知道如何让 3 个 span 一个叠一个。

这是一个显示问题的 fiddle :http://jsfiddle.net/V9yTs/ (点击按钮查看变化)

编辑 这是最后的工作 fiddle :http://jsfiddle.net/XW3DY/7/

Answer 1

将 span 相互叠加的解决方案是使用 position: relative;(我看到你已经在那里了)，然后修改 span 2 和 3 的上边距，这样他们向上移动到与跨度 1 相同的位置。

这是您的 JSFiddle 的更新版本:http://jsfiddle.net/XW3DY/2/

(请注意， float 元素不能彼此重叠。这就是为什么相对定位通常用于将元素彼此重叠放置的原因。)