JQuery UIスライドが要素を押し下げ、他の解決策が動作しないように見える

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> 

私は検索で見つかった他のソリューションを試してみましたが、彼らは動作していないようです。例えば、外側のコンテナにオーバーフローを隠した固定高さを与えると、スライドが要素の外側を押し下げるのを防ぎますが、右側が下がると左（静的）なテキストを上に押します。ここで私のオリジナルコードで何が起こるかを示すJSFiddleがあります。

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

基本的に私はちょうど右側が何かを動かすことなく引き出したいです。

私は絶対的な位置づけに切り替えるのではなく、相対的な位置を維持したいと思いますが、絶対に切り替えるのが最良の方法であれば、私は反対しません。誰か助けてくれますか？ありがとう！

Answer 1

オーバーフローを追加する必要があります。 CSSの

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

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

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

Answer 2

これにあなたのCSSクラスを変更し

：非作業リンク

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

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