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。