javascript - jQuery UI Slide 将元素向下推，其他解决方案好像不行

Question

编辑:糟糕，我在处理实际元素时忘记打开控制台以清除缓存。以前的解决方案和您建议的解决方案都可以正常工作。谢谢大家

所以我试图让一些东西滑出，而其他内联的东西保持静止。但是，滑动会将下面的其他元素向下推。

这是基本的 HTML:

<div id="title-container">
  <h1 class="inline-header">Example.</h1>
  <h1 id="sliding-text" class="inline-header">slide</h1>
</div>
<button id="slideButton">SLIDE</button>

我尝试了通过搜索找到的其他解决方案，但它们似乎不起作用。例如，给外部容器一个固定的高度并 overflow hidden ，将防止幻灯片将外部元素向下推，但当右侧向下时将左侧(静态)文本向上推。这是一个 JSFiddle，显示我的原始代码中发生了什么。

https://jsfiddle.net/9hj6y79k/11/

本质上我只是想让右侧滑出而不移动其他任何东西。

我希望位置保持相对(而不是将其全部切换为绝对定位)，但如果切换为绝对是最好的方式，我不会反对。有人可以帮忙吗？谢谢!

Answer 1

您需要添加 overflow:hidden;在 CSS 中

https://jsfiddle.net/9hj6y79k/12/

.inline-header {
  display: inline-block;overflow:hidden;
}

#title-container {
  position: relative;
  left: 40%;
}