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

时间:2012-08-06 22:07:46

标签: javascript jquery css jquery-ui-resizable

如何让可调整大小的div不被相邻元素重叠?我将可调整大小的div的z-index更改为1,其余为0。

此示例将立即显示: http://jsfiddle.net/gALUP/1/

HTML

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

CSS

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

.resizable { 
    background-color: #0000ff; 
    position: absolute; 
    z-index: 1; 
}

1 个答案:

答案 0 :(得分:0)

z-index: 0移除.outline

.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;
}

http://jsfiddle.net/elclanrs/gALUP/2/