html - css画像コンテナから切り取ります

Question

こんにちは、私は2つの画像を並べて配置し、一方をもう一方の画像と重ね合わせようとしています。

プロパティを使用してみz-indexましたが、positionプロパティをfixedまたはabsoluteのようなものに設定しない限り、これは機能しません。これにより、サイトのレイアウトが台無しになります。

幅と高さが設定された画像コンテナがありますが、コンテナの一部を長方形のように切り取って、下の画像のようにカットの内側に画像を配置できるのではないかと思いました。

これは可能ですか？

ありがとう！

Answer 1

position：relativeは、要素を通常の位置に対して相対的に配置し、ドキュメントフローの場合、要素がまだそこにあるように見せかけます。この例を参照してください。

http://jsfiddle.net/GtJMF/

position: relative;

Answer 2

position:absoluteこのシナリオにを使用すると、サイトがどのように混乱するかわかりません。

position:relative「画像コンテナ」を装着します。position:absolute; right:0, bottom:0;「カットアウトパーツ」を装着します（イメージコンテナにもあると仮定します）。これにより、探している正確な効果が得られます。

ポジショニングは、含まれているポジショニングされた親を基準にしています。position:relative要素を「ポジショニングマスター」にして、すべての内部ポジショニングがその座標系に使用するだけで十分です。

Answer 3

position:relativeまた、「有効化」z-indexしますが、これとは異なりabsolute、fixed残りのレイアウトを台無しにすることはありません。