0

画像をオーバーラップさせようとしています。最初の画像の「Adobe」がすべて表示されるはずですが、2 番目の画像によってブロックされたため、3 番目の画像もブロックされました。

ここに画像の説明を入力

異なる z-index を使用して、一番左の画像をスタックの一番上に表示しますが、ここでは機能しません。margin-left を負の値で使用するのは間違っていますか?

<html>
    <head>
        <title>Demo</title>
        <style>
            li {
                float: left;
                display: inline;
                margin-left: -20px;
            }
            .A {
                z-index: 10;
            }
            .B {
                z-index: 9;
                margin-top: 3px;
            }
            .C {
                margin-top: 6px;
                z-index: 8;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><img class="A" src='adobe.gif' /></li>
            <li><img class="B" src='adobe.gif' /></li>
            <li><img class="C" src='adobe.gif' /></li>
        </ul>
    </body>
</html>
4

3 に答える 3

9

次のルールを追加する必要があります。

li img {
    position: relative;
}

または の別の値position。 の定義にz-indexよると、配置された要素でのみ機能します。

于 2012-05-07T06:54:15.603 に答える
0

JSBIN: http://jsbin.com/itepeg

次のようにコードを調整します。

<html>
<head>
<style type="text/css">
.A
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.B
{
position:absolute;
left:40px;
top:10px;
z-index:-1;
}
  .C
{
position:absolute;
left:80px;
top:20px;
z-index:-1;
}
</style>
</head>

<body>

  
  <ul>
            <li><img class="A" src='http://l.yimg.com/cv/ip/ap/default/111202/vs_fc.jpg'></li>
            <li><img class="B" src='http://l.yimg.com/cv/ip/ap/default/111202/vs_fc.jpg'></li>
            <li><img class="C" src='http://l.yimg.com/cv/ip/ap/default/111202/vs_fc.jpg'></li>
        </ul>

</body>
</html>

JSBIN: http://jsbin.com/itepeg

お役に立てれば。

于 2012-05-07T06:57:09.303 に答える
0

ここでは、タグの組み合わせが問題であるように見えます.z-indexを強制しようとしている間、徐々にマージンを左に移動することは理想的ではありません. それらをオーバーラップさせますか、それとも重ねて表示しますか?

一方が他方の上にある場合、UL / LIコンボは必要なく、次のものを持っていることを提案したくなるでしょう：

<div class="image_container">
  <img class="A">
  <img class="B">
  <img class="C">
</div>

したがって、CSSを持つ：

.image_container {
    position: relative;
    width: <widest image width>;
    height: <highest image height>;
}

.image_container img {
    position: absolute;
}

.image_container img.A {
   z-index: 10;
}
.image_container img.B {
   z-index: 9;
}

etc.

ただし、オーバーラップの意味について100％確信があるわけではありません-オーバーラップではなく、大まかに達成したいのでしょうか？.

于 2012-05-07T06:57:20.863 に答える