Javascript 如何使用可调整大小的元素重叠其他元素？

如何防止可调整大小的div被相邻元素重叠？我将可调整大小的div的z索引更改为1，其余为0

此示例将立即说明：

HTML

<div id='grid'>
    <div class='outline'>
        <div class='container resizable'>
        </div>    
    </div>
    <div class='outline'>
        <div class='container'>
        </div>    
    </div>
</div>

---

从

中删除
z-index:0
。大纲

：

.outline {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    position: relative;
    display: inline-block;
}
.container {
    height: 100%;
    width: 100%;
    background-color: #ff0000;
}
.resizable {
    background-color: #0000ff;
    position: absolute;
    z-index: 1;
}

---

对不起，我不清楚，没有重叠。您是否正在使用IE7/IE8？在那些浏览器中使用内联块是个坏主意。更好地使用display:block和float:leftSo简单。为什么会这样呢？因为你在父元素上设置了一个较低的z索引，所以不管你在子元素上设置了什么，它都不会有任何效果

.outline {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    position: relative;
    display: inline-block;
}
.container {
    height: 100%;
    width: 100%;
    background-color: #ff0000;
}
.resizable {
    background-color: #0000ff;
    position: absolute;
    z-index: 1;
}