要素の重なり順について、プラグインが生成した要素と、サイドバーが重なるときにサイドバーが上に来てしまう【wpForo Ads Manager】 - CSSカスタマイズ相談

RE: 要素の重なり順について

わいひら — Tue, 28 Nov 2023 11:25:26 +0000

うまくいったようで良かったです。

RE: 要素の重なり順について

wayl — Tue, 28 Nov 2023 11:21:14 +0000

@yhiraさんへ

それで合っています。

RE: 要素の重なり順について

wayl — Tue, 28 Nov 2023 11:19:27 +0000

やってみたところ、順番をうまく変えることができました！

迅速な対応ありがとうございます。

RE: 要素の重なり順について

わいひら — Tue, 28 Nov 2023 11:12:58 +0000

添付した画像の通り、プラグインが生成した要素と、サイドバーが重なるときにサイドバーが上に来てしまいます。

ちなみにこの要素を生成したプラグインは何というプラグインなのでしょうか？
同様の問題が生じた方がプラグイン名とテーマ名で検索した場合、このトピックにたどり着きやすいようにプラグイン名を教えていただければ幸いです。

これあたりですか？

wpForo Ads Manager 3.0.3

RE: 要素の重なり順について

わいひら — Tue, 28 Nov 2023 11:10:50 +0000

-1だとそうなっちゃうんですね。
以下のコードだとどうでしょうか。

#main {
  z-index: 1;
}

#sidebar {
  z-index: 0;
}

RE: 要素の重なり順について

wayl — Tue, 28 Nov 2023 10:53:25 +0000

返信ありがとうございます。

試したのですが、サイドバーのボタンがすべて押せなくなりました。

※要素の順番はうまく変わりました。

RE: 要素の重なり順について

わいひら — Tue, 28 Nov 2023 10:46:48 +0000

子テーマのstyle.cssに以下のように書くとどうでしょうか。

#sidebar {
  z-index: -1;
}

2023-11-28_19h44_49.png

要素の重なり順について、プラグインが生成した要素と、サイドバーが重なるときにサイドバーが上に来てしまう【wpForo Ads Manager】

wayl — Tue, 28 Nov 2023 09:16:22 +0000

こんにちは。

添付した画像の通り、プラグインが生成した要素と、サイドバーが重なるときにサイドバーが上に来てしまいます。

※プラグインが生成した要素は通常、スクロールに追従しませんが、positon: fixed;で追従するようにしています。

z-indexで、プラグインが生成した要素を最前面にしようとしたのですが、うまくいきません。

この場合、どういったことをすればプラグインが生成した要素は、サイドバーに隠れることなく前面に表示できるのですか？

ご教示いただけると幸いです。

URL：https://way-l.com/topicid/16/

環境情報
----------------------------------------------
サイト名：WAYL
サイトURL：https://way-l.com
ホームURL：https://way-l.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
WordPressバージョン：6.2.3
PHPバージョン：7.4.33
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:120.0) Gecko/20100101 Firefox/120.0
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.0.3
カテゴリー数：2
タグ数：3
ユーザー数：5
----------------------------------------------
Gutenberg：1
AMP：0
PWA：1
Font Awesome：5
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2023/08/e92512132610dd098d357f2155bf891a.png
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Admin Bar & Dashboard Control 1.2.8
Classic Widgets 0.3
codoc 0.9.51.9
Google Analytics for WordPress by MonsterInsights 8.21.0
UpdraftPlus - Backup/Restore 1.23.12
WP Dark Mode 4.2.0
wpForo 2.2.3
wpForo Ads Manager 3.0.3
wpForo Advanced Attachments 3.1.2
wpForo Custom Intro Topics 1.0.0
----------------------------------------------

104880.jpg