html - 重叠问题

Question

我在 float div 中遇到重叠元素的问题。我一定是错误地应用了 z-index，但我尝试了一些不同的东西，但我无法让这两个元素重叠。我有以下代码(注意: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>

编辑** 我已经完成了!最后。感谢您的帮助...在看到您的代码后，我看到了绝对和相对的一起使用。我现在对这些东西的用法有了更好的理解，现在我正在使用(并且我认为是正确的)定位，而不是使用填充/边距来定位东西。我为自己的所作所为感到愚蠢。

Answer 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;
}