css - ie7中定位绝对和相对问题

Question

有一个 div 具有用于切换 div 的切换行为 div 的右下角有一个图像将图像放置在右下角我正在使父 div 位置相对并绝对设置图像位置但是问题出现了当我单击图像以打开向上切换时，图像停留在底部，向下切换时它会转到顶部，此行为仅在 ie 7 和 ie8 firefox chrome 中表现良好

css有点像这样

 .filterPanel
{
 border: 1px solid #fbcb09 ;
 -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radious: 5px;
 position: relative;
 margin: 0;
 padding:0;
 z-index: 1;
}
.toggleCollapse, .toggleExpand
{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;

    background-color: #FFF;
    border: 1px solid #FBCB09;
    cursor: pointer;
    padding: 2px 1px 2px 2px;
    position: absolute;
    bottom: -10px;
    right:5px;
    z-index: 1000;
}

过滤器面板是父 div，toggleCollapse 是我正在谈论的图像，它在这个 div 内部(过滤器面板)如何解决这个问题

Answer 1

我不确定我是否理解您的问题，但负边距和相对位置在 IE 中变得令人作呕。

考虑一种不同的方法:要将您的 toggleCollapse 按钮​​放在底部，忘记position:relative业务将按钮放在您要切换的 div 之后并将其位置设置为相对位置，顶部:-10px(或其他)。

如:

<div class="filter_wrapper">
<div class="filter_panel">Some stuff</div>
<a class="toggle">[ toggle me ]</a>
</div>