JQuery UI Slide将元素下推，其他解决方案似乎不起作用答案

【问题标题】：JQuery UI Slide pushes elements down, other solutions don't seem to workJQuery UI Slide将元素下推，其他解决方案似乎不起作用
【发布时间】：2017-02-17 13:19:10
【问题描述】：

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

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

这是基本的 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>

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

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

基本上我只是希望右侧滑出而不移动其他任何东西。

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

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

您需要添加溢出：隐藏；在css中

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

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

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

【讨论】：

【解决方案2】：

将您的 css 类更改为：

 .inline-header {
     display: inline-block;
     vertical-align: top;
 }

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

【讨论】：