CSS3 変換によって子要素の固定位置を絶対位置に変更する方法

この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を紹介します。この方法を皆さんと共有し、検索しやすいようにメモも残しておきます。

<!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
   体 {
    背景: #f60; // オレンジ}
  。親 {
     位置: 固定;
     幅: 300ピクセル;
     高さ: 300px;
     右: 0;
     上: 0;
     背景: #02bd00; // 緑 変換: translateX(0);                 
  }
  。子供 {
     位置: 固定;
     左: 0;
     右: 0;
     上: 0;
     下部: 0;    
     background: rgba(0,0,0,0.2); // 黒透明: マスク}
</スタイル>
</head>
<本文>

<div class="parent">
  <div class="child"></div>
</div>

</本文>
</html>

問題に遭遇したことのない学生にとって、問題の原因を見つけるのは簡単ではありません。効果を示す画像を以下に示します (緑色の部分のみがマスクされていますが、書き方に問題がないと思われるかもしれません)。

実際、サブ要素のフルスクリーン効果が必要な場合は、 transform: none; を設定する必要があります。

この問題は非常に典型的です。親要素に有効な transform 属性を設定すると、子要素が絶対要素として固定され、子要素が親要素と同じサイズになります。このとき、子要素の offsetTop と offsetLeft は両方とも 0 なので、注意が必要です。
発生シナリオ: 通常、フレームワーク UI に基づいてカスタムスタイルが追加されたときに表示されます。

CSS3 トランスフォームを使用してサブ要素の固定配置を絶対配置に変更する方法についての記事はこれで終わりです。より関連性の高い CSS3 トランスフォームサブ要素の固定コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: seata docker 高可用性デプロイメントの詳細な紹介

>>: 基礎知識: ウェブサイトのアドレスの前の http はどういう意味ですか?