overflow-x:hiddenの邪魔をするposition:absolute

jQueryスライダープラグイン「ItemSlide.js」を使用し、画面をはみ出る分は非表示にするためoverflow:hiddenを指定。しかし何故か横軸のコンテンツ幅を打ち抜いておりました。

ググってみると解決方法が２つ出てきました。

１、全体を包むwrapperを作り、overflow-x:hiddenを指定する

２、子要素にposition:absoluteがある場合は親要素にposition:relativeを指定する

まずは１を試してみる。参考にしたのは下記サイトです。

「モバイルでoverflow-xが効かない時の対策 | ゆんつてっく」https://yuntu-tek.com/overflow-x/

しかし、直らず。次は２を試してみる。参考にしたのは下記サイトです。

「CSSでoverflow:hidden;が効かない - Qiita」https://qiita.com/nokomilk_fish/items/2bad320f6ea93b0a4025

きちんと画面横幅をぶち抜かず、スライダーが機能していました！ちなみに１で紹介したサイトの主様は逆に２では効かなかったようです。

余談ですが、今回のposition:relativeを追加したために他作業に少し影響しました。それは以前記事にあげた「background-attachment:fixedはiOSでは機能しない。」と関係しています。position:relativeを使いたいがpotision:fixedも使いたい・・・となってしまったので素直にposition:fixedを使えず記述が多くなってしまったというものです。

どうしてこう、次から次へと問題が発生し、それをカバーしようとまた他へ影響を与えて・・・の繰り返しになるのでしょうか。きっと上手にコーディングができる方はスタイリッシュにまとめることができるのでしょう。私はまだまだですね。