CSSスティッキー配置スティッキー詳細解説-CSSチュートリアル-php.cn

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

Guanhui

リリース： 2020-05-30 09:45:55

転載

13183 人が閲覧しました

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

はじめに: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 サイトの他の関連記事を参照してください。