質問:今日の開発プロセス中に、position:fixed を使用する際の要素の位置に問題があることに気付きました。その位置が、私が書いた位置と一致しません。後で、MDN で答えを見つけました。以下は、位置の説明: 固定:
修正:
要素は通常のドキュメント フローの外に移動され、要素用のスペースは確保されませんが、要素の位置は、画面のビューポート (ビューポート) を基準とした要素の位置を指定することによって指定されます。画面をスクロールしても要素の位置は変わりません。印刷時、要素は各ページの固定位置に表示されます。固定属性は、新しいスタッキング コンテキストを作成します。要素の祖先のtransform、perspective、filter、またはbackdrop-filter属性がnone以外の場合、コンテナはビューポートからその祖先に変更されます。
その理由は、この要素には、transform、perspective、filter、または backdrop-filter が設定された親要素または祖先要素があり、簡単なテストを実施しました。コードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试页面</title>
<style>
body{
border: 1px solid red;
}
.box{
width: 400px;
height: 400px;
background-color: pink;
transform: translate(200px,200px);
}
.child{
width: 200px;
height: 200px;
background-color: purple;
position: fixed;
left: 200px;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
結果のスクリーンショットは次のとおりです。
子の上部の値を 0 に設定していますが、上部から 200 ピクセル離れていることがわかります。これは、親要素の絶対位置に基づいていることを意味します。この問題を解決するにはどうすればよいでしょうか? 解決策は次のとおりです。
1. 親要素または祖先要素で行われる操作を逆に実行します。たとえば、この例では、親要素で操作が実行され、transform: translate(200px,200px);次に子要素でtransform: translate(-200px,-200px);操作が実行されます。
2. dom 構造を変更し、子要素を body の下に配置します。一般に、固定配置の要件は、ページ上のポップアップ ウィンドウがブラウザの中央に配置される必要があることです。この時点で、次のことが可能です。この要素を body タグの下に置くと、親要素に対する変換などの操作を回避できます。VUE3 では、組み込みコンポーネント Teleport が提供されます。これにより、指定された親要素の下にコンポーネントを配置でき、レンダリングされた DOM 構造のみが変更されますが、コンポーネント間の論理関係には影響せず、この問題を完全に解決できます。