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

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 はどういう意味ですか?

推薦する

HTML テーブルタグチュートリアル (27): セルの背景画像属性 BACKGROUND

セルの背景画像を設定でき、任意の GIF または JPEG 画像ファイルを使用できます。基本的な構文...

CSS 背景画像を設定するための 6 つの興味深いヒント

background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...

JSはプログレスバーのスムーズバージョンの詳細な計画を実装します

進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...

忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します

MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...

MySQL データベースのホットスタンバイにおける問題点の分析

以前、MySQL データベースのデュアルマシン ホット スタンバイの設定方法を紹介しました。ご興味の...

Vue3 ドラッグ可能な左パネルと右パネルの分割コンポーネントの実装

目次コンポーネントの分解左パネル右パネル入力パラメータの分解小道具スロット具体的な実装ドラッグする方...

Win10 システムに MySQL8.0.13 をインストールする際の問題と解決策

オペレーティングシステム: Windows10 MySQL バージョン: 8.0.13-winx64...

APPログインインターフェースシミュレーション要求を実装するためのPostmanデータ暗号化と復号化

目次主に使用されるPostmanの機能データの暗号化と復号化さまざまなパラメータ設定実際に送信された...

Windows 10 で MySQL 8.0.12 の解凍バージョンをインストールして構成する方法 (グラフィック チュートリアル付き)

この記事では、MySQL 8.0.12 の解凍版のインストールと設定方法を記録し、皆様と共有します。...

mysql 5.7.20 win64 のインストールと設定方法

mysql-5.7.20-winx64.zipインストール手順のないインストール パッケージ: ht...

サブメニューをクリックする効果を実現するJavaScript

この記事では、クリック時にサブメニューを表示するためのJavaScriptの具体的なコードを参考まで...

インラインブロックを使用した複数のdiv間の間隔はプログラミング方法とは異なります

inline-block について学習しているときに、境界線と inline-block を持つ複数...

CSS エラスティック ボックス flex-grow、flex-shrink、flex-basis の詳細な説明

3 つの属性 flex-grow、flex-shrink、flex-basis の機能は次のとおりで...

HTML ハイパーリンクの詳細な説明

ハイパーリンクハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間...