Question

我需要了解IE上的z-index问题。这是我的html标记：

   <div style="position:relative">
        <div style="position:absolute">
           <a style="position:absolute"> close button </a>
        </div>
   </div>

锚点（关闭按钮）部分位于其父级之外（顶部：-4px;右侧：-4px;）但它会在父级边界处被切断。有没有办法让锚看起来正确？

稍后修改：http://jsfiddle.net/RTTkU/1/

Answer 1

发布到目前为止的任何内容，以便我们可以看看，但同时我做了一个小型演示，你可以尝试看看它是否正在寻找：

<强> CSS

.box {
    position:relative;
    width:400px;
    height:200px;
    background-color:#ddd;
}

.close {
    position:absolute;
    top:-6px;
    right:-6px;
}

.close a {
    background: url(http://cdn3.iconfinder.com/data/icons/lynx/22x22/actions/dialog-close.png) no-repeat transparent;
    display:inline-block;
    height:22px;
    width:22px;
    text-indent:-9999px;
    z-index:9999;
}

<强> HTML

<div class="box">
    <div class="close">
       <a title="Close" href="#">close</a>
    </div>
</div>

Demo

Answer 2

应用于框的IE特定“过滤器”属性充当“溢出：隐藏;”从而裁剪出穿过盒子边界的每个子元素。

Answer 3

父母可能需要overflow: visible。

绝对div内的绝对元素的z-index问题

3 个答案: