0

フローティングdiv内のアイテムのオーバーラップに問題があります。z-indexを間違って適用しているに違いありませんが、いくつかの異なることを試しましたが、2つの項目をオーバーラップさせることができません。私は次のコードを持っています（注：topLinkとtopIconNew divは実際にはpngです）：

http://jsfiddle.net/jhacks/neskB/7/

HTML：

<div class="topIcon">          

<div class="topIconNew"></div>
<div class="topLink"></div>

</div>

CSS：

.topIcon{

border:1px solid black;
background-color:gray;
width:28px;
height:40px;
float:right;
position:relative;
}

.topLink{
background-color:green;
width:16px;
height:16px;
position:absolute;
    top:14px;
    left:6px;
    z-index;300;
 }    

.topIconNew{
background-color:red;
margin:30px 0px 0px 18px;
width:10px;
height:10px;
position:relative;
    z-index:350;
cursor:pointer;
}

pngのHTML（違いが生じる場合）：

<a href="xxxxx.html"><img src="xxxxx.png"> </img> </a>

編集**私はそれをしました！ついに。助けてくれてありがとう...あなたのコードを見て、私は絶対と相対の使用を一緒に見ました。私は今、それらの使用法についてよりよく理解し、パディング/マージンで物事を配置する代わりに、配置を使用しています（そして正しくそう思います）。自分がやっていることをやるのはバカだ。

4

1 に答える 1

1

編集していただきありがとうございます。あなたの質問はより明確になりました。これはあなたの質問を満足させると思います。

http://jsfiddle.net/neskB/26/

さて、これは今ではもっと理にかなっています。

  1. 灰色のdivが右に浮かんでいます
  2. これに緑色のdivを中央に配置したい
  3. 緑のdivの右下に赤いdivが必要です

まず、html 構造をこれに変更します。

<div class="topIcon">                 
    <div class="topLink">
        <div class="topIconNew"></div>
    </div>                    
</div>

リンクは、その親アイコンに対して相対的に配置されます。New は、その親である Link に対して相対的に配置されます。

/* set topIcon to relative so that its child will be positioned relative to it */
.topIcon{     position: relative;   }

/* topLink is absolute positioned. We use top/left of 50% and negative margins to automatically center it */
.topLink{
    position: absolute;
    width:16px;
    height:16px;
    margin:-8px 0 0 -8px;
    left:50%;
    top:50%; 
}

/* New is positioned in bottom right of its parent */
.topIconNew{
    position:absolute;
    bottom:0px;
    right:0px;
}
于 2011-12-07T05:59:16.147 に答える