0

我在浮动 div 中遇到重叠项目的问题。我一定是错误地应用了 z-index，但是我尝试了一些不同的方法，但我无法让这两个项目重叠。我有以下代码（注意：topLink 和 topIconNew divs 实际上是 pngs）：

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

pngs 的 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 回答