4

div2 つの透明な画像 (同じサイズ/寸法)を左上隅でオーバーラップさせようとしています。私は試した：

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="margin:20px;">
<div id="main" style="overflow:hidden;background-color:red;width:400px;height:400px;border:3px solid blue;">
<img src="myimage1.png" style="position:relative;top:0px;left:0px;z-index:0;"/>
<img src="myimage2.png" style="position:relative;top:0px;left:0px;z-index:10;"/>
</div>
</div>
</body>
</html>

しかし、それはうまくいきません。代わりに、2 つの画像が親内で連結されますdiv。

4

3 に答える 3

6

#mainhaveを作成してposition:relativeから、2<img>を useに変更しますposition:absolute。

于 2010-04-04T16:13:49.687 に答える
1

2番目の画像position:absoluteと#mainを作るposition:relative

于 2010-04-04T16:14:50.417 に答える
0

ただのメモ：

position:relativeおよびを持つ最も近い親のをposition:absolute参照します。あなたの のどれも持っていない場合は、ドキュメント ( ) の (左上) を参照します。0;0position:relativeposition:absolutediv0;0body

position:relative- 上と左は、要素の自然なフロー値の差を示します。つまり、「画像」に自然なフローx1500 とy1200 がある場合、top: 150px; left: -50px;それを移動します。x: 1450; y: 1350;

position:absolute0;0- 上と左は、自然な流れに関係なく、最も近い要素p:rまたはp:a親要素に対して整列されます - ex. (疑似 html/css で):

<div style="relative/absolute">
  <img absolute="top:-20px; left: 150px;">
</div>

画像は、親 div の左上隅から 20 ピクセル高く、右に 150 ピクセルになります。

とは言っても、コンテナは相対および絶対のいずれかである必要があり、スタックされた画像は両方position:relativeともtop: 0; left: 0;. z-indexレイヤリングをより適切に制御したい場合は、を設定することを忘れないでください。

-A

于 2010-04-04T16:20:59.667 に答える