CSS Transform 3D を使用して子要素を親の後ろに配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS Transform 3D を使用して子要素を親の後ろに配置するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-11-30 03:51:12

オリジナル

464 人が閲覧しました

How Can I Position a Child Element Behind Its Parent Using CSS Transform 3D?

Transform 3D を使用して子要素を親の後ろに重ねる方法

質問:

どのようにすれば、動的子要素は、DOM 内の位置に関係なく、常に親要素の前に表示されます。ツリー?

答え:

CSS を使用すると、最新のブラウザで 3D プロパティの変換を使用してこれを実現できます:

.parent {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.child {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px);
}

ログイン後にコピー

この CSS は次のように構成します3D 変換スタイルを持つ親要素とその中に子要素を絶対的に配置します。 transform:translateZ(-10px) プロパティは、子要素を Z 軸に沿って後方に 10px シフトし、親の後ろに表示できるようにします。

HTML 構造:

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

ログイン後にコピー

以上がCSS Transform 3D を使用して子要素を親の後ろに配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。