html 两个元素位置重叠,相对位置的HTML元素重叠父节点

这里是你的问题的变通方法

HTML：

very long item

very long item

very long item

very long item

very long item

very long item

very long item

very long item

very long item

CSS

.container{

background-color:red; /* to show the container's boundary */

font-size:12px;

}

.container span{

position:relative; /* vital for setting the z-index item */

float:left;

display:block; /* otherwise, margin will be ignored */

padding:1em; /* just for creating some space between items */

}

JS(jQuery的)

$(window).ready(function(){

var expansion_amount = 100; //expansion amount in pixels

$('.item').hover(

function(){

//mouse on

$(this).css({

'background-color':'green',

'z-index':'100',

'height':$(this).height() + expansion_amount + 'px',

'margin-bottom': -expansion_amount + 'px'

});

},

function(){

//mouse off

$(this).removeAttr('style');

}

);

});

此处的关键功能是使用负边距值。尽管物品的高度或宽度都会增长，但它必须在该方向上获得相同的负边距。

此代码也可以用纯CSS编写，但它需要了解当前项目的高度或使用css3 calc。