Q&A
takapiro99様
https://codepen.io/emma1027/pen/qBPGrqV
ご回答ありがとうございます。こちらで見れますでしょうか？
前提・実現したいこと
色々なサイトを参考にアコーディオンメニューを作ったのですが、サイドメニュー固定の為のposition: sticky;が上手く効かず、文字が上に上に重なってしまいます。
発生している問題・エラーメッセージ
該当のソースコード
注:ハンバーガーメニューとありますが、現状はただの飾りです。
試したこと
一通り検索して確認しましたが解決しませんでした。
z-index:999; をstickyを記入した箇所に入れましたが変わりませんでした。
補足情報（FW/ツールのバージョンなど）
解決のため、別のサイトにあるアコーディオンのhtmlに今あるclassを代入してみたりしたのですが、私の技量ではレイアウトが崩れるだけで上手くできませんでした。
できることなら今のhtmlを訂正して何とかならないものかと思っています。
不足事項がありましたら申し訳ありません。
宜しくお願い致します。
見ました！ありがとうございます
`sticky` にしたい理由ってなんでしたっけ？ sticky 外したらそれっぽく動くので。。。
ありがとうございます。
そうなんですよね;メニューを開いた時の変な動きもstickyを追加してから始まってしまって。
理由はただ単に、追尾させたい・cssで簡単に実装したかった、だけです。
調べたところjQueryなどを使えばできるとの事でしたが、まだ勉強途中なのと動作が重くなる(?)と見たのでhtmlの変更でどうにかならないかと思った次第です。
また、position:fixedも検証したところ右側に来るmain要素がメニューに被さるようになってしまったため、どうせなら追尾の方がいいかなと思いました。
> position:fixedも検証したところ右側に来るmain要素がメニューに被さるようになってしまったため
fixed いいですね！その分のスペースに空の div を置いて被らなくしたらどうでしょうか？
ありがとうございます。試してみた所、main要素が被る件に関してはmarginで対応できたのですが、以下2点が問題でした。
・下の方のメニューを開くと途切れてしまう為見れなくなってしまう
・フッターに被ってしまう
サイドメニュー自体は理想の形になっているのに他が厳しい様でした。
わざわざアドバイスいただいたのに申し訳ないです。
回答2件
0
自己解決
アコーディオンメニュー（.dropdownlink）の１つづつに１〜１０までのclassをつけ、１つづつにz-indexとbackgroundを設定したところ字が重なることはなくなりました。
参考にさせて頂いたサイト様
しかし、スクロール直後からメニューが消えていき追従はできていません。
一旦字の被りは解決することができたので、追従についてはまた別途質問させていただこうと思います。
投稿2022/01/20 16:45
総合スコア26
0
position: sticky;が効かない
と言っているのに、CSS の添付がないのでどうしようもできません。。。
https://codepen.io/ などで全体を載っけていただけると分かりやすいです
投稿2022/01/19 16:05
総合スコア232
あなたの回答
tips
プレビュー
