Question

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

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/

好的，所以现在更有意义了。

你有正确的灰色div
您想在此
你想要绿色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;
}

重叠的问题

1 个答案: