質問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 は要素のステータスを上げるからです。
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 個のコンテナ要素による無限スクロールの実装コード
目次1. Dockerはリモートアクセスを可能にする2. Intellij IDEAにDockerプ...
目次1. デップ2. 観察者を理解する3. 監視と観察者を理解する4. トリガーの依存性5. プロセ...
コードをコピーコードは次のとおりです。 <input type="text"...
CSS3 の 3D 効果を使用して立方体を作成する方法を学ぶと、3D シーンの回転と変位のプロパティ...
この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...
前回の記事では、クロステーブル更新について書きました。自分が書いた SQL を見たとき、自分がバカみ...
目次実装のアイデア:ステップ 1: TabBar と TabBarItem のコンポーネント カプセ...
1. Docker pullはイメージをプルします$ docker pull {IMAGE_NAME...
概要データベースは通常、複数のトランザクションを同時に実行します。複数のトランザクションが、同じデー...
オリジナルリンクhttps://github.com/XboxYan/no…ボタンは、おそらく We...
序文前回の面接では、実行計画について質問されたとき、多くの人がそれが何なのか知りませんでした。実行計...
MySQL の日付型単一行関数: CURDATE()またはCURRENT_DATE()は現在の日付を...
目次1. 遅延読み込みとは何ですか? 2. 遅延読み込みを実装する🌄: 2.1 最初の方法: 2.2...
序文実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共...
最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...