CSSスティッキー配置スティッキー詳細解説

#良いものを見つけました

はじめに:position:sticky は CSS 位置決めの新しい属性です。静的 (位置決めなし) と固定位置決めの組み合わせと言われています。これは主にスクロール イベントの監視に使用されます。簡単に言えば、スライド プロセス中に、要素とその親要素の間の距離が固定位置決めの要件に達したとき (たとえば、 as top: 100px);position: Sticky、このときの効果は固定配置と同等で、適切な位置に固定されます

スティッキー配置について話す前に、その他の位置の配置について話しましょう、

absolute: 絶対位置を生成する 配置された要素は、静的配置以外の最初の親要素を基準にして配置されます。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

fixed: ブラウザ ウィンドウを基準にして配置された固定位置要素を生成します (古い IE はサポートしていません)。要素の位置は、「左」、「上」、「右」、および「右」で指定されます。 「底部」属性。

relative: ドキュメント フローから離れることなく、通常の位置を基準にして相対的に配置された要素を生成します。

static:

デフォルト値、位置指定なし。要素は通常のドキュメント フローに表示されます (上、下、左、右、または

z-index 宣言は無視されます)。継承は、位置属性の値が親要素から継承される必要があることを指定します。

sticky の使用:

#sticky-nav {
    position: sticky;
    top: 100px;
}

position:sticky を設定し、(上、下、右、左) のいずれかを同時に付与します

使用条件:

親要素には、overflow:hidden 属性または overflow:auto 属性を含めることはできません。

上、下、左、右の 4 つの値のいずれかを指定する必要があります。指定しない場合は、相対位置のみになります。

親要素の高さを指定することはできません。スティッキー要素の高さより低い

スティッキー要素は親要素内でのみ有効です

プロジェクトの落とし穴

問題の説明:

小規模なプログラム開発プロジェクトでは、タブ コンポーネントが使用されます。タブ バーの切り替えを含む固定的な配置です。タブ バーの下部には、大きなリスト コンテナーのコンテンツが表示されます。表示コンテンツには、クリック イベント (またはタッチ イベント) が含まれます。イベント); iOS および PC ブラウザでのクリック テスト これは通常のことですが、Android スマートフォンでは! ！ ！ ！なんと、カチッと成功しました！ ！さらに、リストコンテナ内の項目のクリックジャンプを外そうとしたところ、タブ切り替えのクリックが反応せず、イベントが消えてしまいました！ ！ ！ブレークポイントを設定してイベント フローの方向を確認します: 最初のイベント キャプチャ --> ターゲット ノード タブ --> イベント バブリング。このバブルは実際にコンテナ リスト内の項目にポップアップします。 。 。大まかなプロジェクト構造:

html 構造:

<div class="service-wrap">
        <tab>这是tab切换</tab>
        <div class="list-container">
            <!--for循环有很多item-->
            <item></item>
            <item></item>
        </div>
    </div>

解決策:

コンポーネント ライブラリのタブを使用する場合、外側の層に div を配置して、クリックの浸透および異常なイベント フローの傾向、または (ビジネス シナリオに応じて、根本原因ではなく症状を治療する方法)

. コンポーネント ライブラリのスタイルは変更できません。スティッキーはインラインとして使用されます。タブ コンポーネントのスタイル。このタブをビューポイントの上部に直接使用するときは、fixed を使用してこれを実現できます。呼び出し側クラスの外側で、position:fixed !import を設定しました。最も優先度の高いスタイルが、コンポーネント ライブラリ内の位置決めスタイルをオーバーライドし、すべてが正常です。

推奨チュートリアル: 「

PHP チュートリアル 」「CSS チュートリアル 」

以上がCSSスティッキー配置スティッキー詳細解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。