Question

这是我的jsfiddle http://jsfiddle.net/6XdcY/4/ 我有一个DIV，它在徘徊在另一个DIV时出现。

在包含div中，有display：block和100％宽度和高度这个<A>会干扰悬停时应该出现的div。

<div id='language'>
    <a class='language' href='en'></a>
    <a class='delete' href='' ></a>
</div>

#language {
    width: 172px;
    height: 218px;
    opacity: 0.85;
    margin: 2px;
    z-index: 1;
    float: left;
}


#language a.language {
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
}


#language:hover {
    width: 172px;
    height: 218px;
    opacity: 1; 
    cursor: pointer;
}


#language:hover .delete{
    display: block;
}


.delete {
    display: none;
    width: 30px;
    height: 30px;   
    background: #fff url(http://tyche.ge/palabra/images/delete_language.png);
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-left: 1px solid #88bde4;
    border-bottom: 1px solid #88bde4;
    margin-right: 1px;
    margin-top: 1px;
    top: 1;
    right: 1;
    float: right;
    z-index: 999;
}

删除按钮应位于包含div内你可以通过jsfiddle更好地理解提前致谢

Answer 1

尝试将此添加到删除按钮：

position: relative;
top: -30px;

Live Demo

Answer 2

你可以试试这个：

#language a.language {
    display: block;
    height: 83%;   // reduce the height from 100%
    width: 100%;
    z-index: 2;
}

或者

在.delete类中添加两个属性，如下所示：

.delete
{
    // other properties 
    position: relative;
    top: -35px;
}

当悬停时，一个div在另一个内部出现 - z-index不起作用

2 个答案: