関連フォーラムトピック

Lightning G3 でサイドバーに配置したウィジェットを position: fixed; を使って画面に固定しようとすると、position: absolute; のような動作になってしまいます。

Chrome / Edge で表示するとこのようになりますが、Firefox は position: fixed; の動作をします。

この件について調べてみて、原因を見つけました。

position: fixed; の動作をさせるためには、以下の CSS を追加すればよいです。

.sub-section {
content-visibility: visible;
}

content-visibility でググると情報が見つかりますが、表示速度の飛躍的向上を期待できる最新の CSS です。

この CSS に Chrome / Edge は対応していますが、Firefox はまだ対応していません。

CSS に上記の行を追加して、この高速化を解除すれば position: fixed; が期待通りの動作をします。

・検索結果のオーバーレイ表示
・表示速度の向上

のどちらをとるかの判断ということになります。

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

Lightning / Katawara を使用したサイト制作は全国どこからでも承ります。遠方からのご依頼の場合、Zoom を使用して打ち合わせを行わせていただきます。

講習形式のホームページ制作サポートも行っています。
お客様ご自身でホームページを制作・カスタマイズする上で、むずかしい部分を講習形式でサポートいたします。制作を手伝ってもらうだけでなく、同時に制作スキルを身につけたいという方はお気軽にお問い合わせください。