CSS の配置: 固定および固定

まず、これら 2 つの配置により、可視領域に dom 要素が固定されますが、ギャップが生じます。

つまり、fixed はドキュメント フローから離脱しますが、stick は離脱しません。

上位コード

.fixTop {
  z-index: 999;
  height:auto;
  position: fixed;
  top: 0;
  left: 0;
  .nav-bar {
    display:block
  }
}

次のような固定位置が中央にスライドします。

上部に固定されていますが、スタイルが変更されました。ダガ、スティッキーは機能しません



.fixTop {
  z-index: 999;
  height:auto;
  position: sticky;
  top: 0;
  left: 0;
  .nav-bar {
    display:block
  }
}

 

 

上部で固定されたままで、中央にスライドしても文書の流れから外れることはありません。

要素がposition:fixed属性を取得するとbfcを取得し、bfc属性を取得した要素は孤立した独立したコンテナとみなされ、コンテナ内の要素は外部の要素に影響を与えなくなります。

おすすめ

転載: blog.csdn.net/Motion_zq/article/details/127006649