位置固定オフセット問題を解決する方法の詳細な説明

位置固定オフセット問題を解決する方法の詳細な説明

質問

CSS 固定配置の position:fixed は非常に使いやすいです。ブラウザのビューポートを基準にして配置されます。top:0;left:0 は左上隅を意味します。

<本文>
  <div class="コンテナ">
  </div>    
</本文>    
<スタイル>
  。容器{
    幅: 100ピクセル;
    高さ: 100px;
    背景: #888;
    位置: 固定;
    上: 100px;
    左: 100px;
  }
</スタイル>

親要素が変換を設定すると

<本文>
    <div class="BFC-box">
      <div class="コンテナ"></div>
    </div>
</本文>
<スタイル>
  .BFC-ボックス{
    マージン:200px;
    高さ: 200px;
    幅: 200ピクセル;
    border:2px 赤一色;
    変換: スケール(1);
  }
  。容器{
    幅: 100ピクセル;
    高さ: 100px;
    背景: #888;
    位置: 固定;
    上: 100px;
    左: 100px;
  }
</スタイル>

固定要素は親要素を基準に配置されます。

これは本当に厄介です。なぜなら、W3C 仕様で説明されているように、transform は要素のステータスを上げるからです。

CSSボックスモデルによってレイアウトが制御される要素の場合、transformにnone以外の値を指定すると、要素は包含ブロックになり、オブジェクトは固定位置の子孫の包含ブロックとして機能します。

transform が none ではない要素では、配置が影響を受けます。

解決

レイアウトに影響を与えずに、要素を body の下に配置するように直接移動できます。

<本文>
  <div class="BFC-box"></div>
  <div class="コンテナ">
  </div>    
</本文>    

コンポーネント内の要素を操作するのが不便な場合は、vue を例に挙げて js を使用できます。

<div ref="コンテナ" class="コンテナ"></div>
マウントされた(){
  document.body.append(this.$refs['container']) を追加します。
}

これで、position:fixed 固定位置オフセット問題を解決する方法についての記事は終わりです。より関連性の高い position:fixed 固定位置オフセット コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<:  n 個のコンテナ要素による無限スクロールの実装コード

>>:  開発者にとって必須の Docker コマンドの概要

推薦する

Intellij IDEA による Docker イメージの展開方法の手順の迅速な実装

目次1. Dockerはリモートアクセスを可能にする2. Intellij IDEAにDockerプ...

シンプルなデータ応答システムを実装する

目次1. デップ2. 観察者を理解する3. 監視と観察者を理解する4. トリガーの依存性5. プロセ...

CSS3の3D効果を使って立方体を作成する

CSS3 の 3D 効果を使用して立方体を作成する方法を学ぶと、3D シーンの回転と変位のプロパティ...

React で setInterval 関数を使用する例

この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...

MySQL 文字列連結関数 GROUP_CONCAT の詳細な説明

前回の記事では、クロステーブル更新について書きました。自分が書いた SQL を見たとき、自分がバカみ...

Vue カプセル化 TabBar コンポーネントの完全なステップ記録

目次実装のアイデア:ステップ 1: TabBar と TabBarItem のコンポーネント カプセ...

Dockerでイメージをプルするための手順を完了する

1. Docker pullはイメージをプルします$ docker pull {IMAGE_NAME...

MySQL トランザクション分離レベルとロックメカニズムの問題に関する深い理解

概要データベースは通常、複数のトランザクションを同時に実行します。複数のトランザクションが、同じデー...

パーティクルダイナミックボタン効果を実現するCSS

オリジナルリンクhttps://github.com/XboxYan/no…ボタンは、おそらく We...

MySQL実行計画の詳細な分析

序文前回の面接では、実行計画について質問されたとき、多くの人がそれが何なのか知りませんでした。実行計...

MySQL の日付型の単一行関数コードの詳細な説明

MySQL の日付型単一行関数: CURDATE()またはCURRENT_DATE()は現在の日付を...

フロントエンドは画像を遅延ロードする方法を知っている必要があります(3つの方法)

目次1. 遅延読み込みとは何ですか? 2. 遅延読み込みを実装する🌄: 2.1 最初の方法: 2.2...

Dockerコンテナとホスト間のデータ相互作用の概要

序文実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共...

Docker の MySQL 時間とシステム時間の不一致の問題を解決する

最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...