質問: ### 前提・実現したいこと 最近、ウェブページの作成を行い始めた初心者です。 上手く説明できない点が多々あるかとは思いますが、 皆さまの知恵をお借りしたいと思い、質問させていただきます。 2カラムのウェブページを作成しており、 html及びcssは、フリーのテンプレを使用させていただいております。 サブコンテンツとしてバナーの設置をしようとしているのですが、 スクロールに追従するようにしたいと考えています。 以下に記載の理由から、position:sticky;を使用しないで、 スクロール追従にできる方法がないか探しています。 ### 発生している問題・エラーメッセージ どうすればよいのか調べていたところ、position:sticky;の使用を推奨している方が多かったため、 詳細を確認してみたところ、要素にoverflow:hidden;が設定されているため、 効かないということがわかりました。 文字が隠れてしまうほど文章量が多いわけではないのですが、 レスポンシブ対応にしているため、横スクロールをしないような構成にしたいので、 hiddenではなくautoやscroll、visibleにすることは考えておりません。 (cssを変更したことにより、レイアウトが崩れてしまうことは避けたいと思っています。) ``` 抜粋ですが、必要と思われる箇所を掲載してみます... (ファイル名を特定されないものに変更した状態です) ※ご指摘を受けました.submenuのコンテンツですが、 今回の作成では使用していないものでした。 そのため、該当箇所は削除させていただきました。 (+の箇所も削除させていただきました。) HTML CSS } #sub { box-sizing: border-box; overflow: hidden; float: right; width: 28%; padding: 10px; background: #fff; } /*================================================ * サブコンテンツ ================================================*/ .bnr { overflow: hidden; } .bnr ul { overflow: hidden; } .bnr li { margin: 0 0 10px 0; padding: 0; list-style: none; } .bnr li a:hover { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; } .bnr img { width: 100%; } ``` ### 試したこと ・classを新たに設けて、公開されているコードを試したのですが、 親要素でhiddenが使用されているため無効でした。 ・親要素に依存しないように、新たに属性?を設けたのですが、 レイアウトが崩れてしまい、お粗末な見た目になってしまいました。 ### 補足情報(FW/ツールのバージョンなど) Microsoft Expression Web4 を使用しております。 初めての作成で、知識も不十分なので説明不足であったり、 抜けていることも多いかとは思いますが、ご教授いただけると幸いです。
回答: 多分これでいけると思います。 ``` .parentClass{ overflow: visible !important; } .childBannerClass{ position: -webkit-sticky; position: sticky; top: 0; } ``` ### `!important` 編集出来ない別のCSSファイルのプロパティ値を変更したい場合、こちら側で上書きする方法があります。 **プロパティの末尾に`!impprtant`と記述する**事で、**その値が最優先され**ます。 **セレクターの詳細度やCSSの読込み順に関係なく、`!impprtant`が付いている値が最優先されます。** 詳細度 CSSスタイルシート | MDN