Проблема с относительным позиционированием заключается в том, что позиции относятся к их нормальному положению, то есть если вы измените размер элемента в середине, браузер переместит и повторно отобразит все, что следует за ним.
Несколькоизменения должны быть сделаны, чтобы заставить его работать.Если вы хотите использовать относительное позиционирование, вам нужно обернуть элементы div для изменения размера в контейнеры фиксированного размера, чтобы при изменении размера они не нарушали поток элементов.Ваши div'ы имеют ширину и высоту 150px, контейнер фиксированного размера должен быть достаточно большим, чтобы вместить его, при условии, что стандартная блочная модель имеет размер 150px + 10px * 2 + 1px * 2 border = 172px.Поскольку поток элементов контролируется контейнерами, я переместил поле в контейнер в css.
Оборачивая их в дополнительный элемент div фиксированного размера, поток элементов никогда не изменится, ваши элементы div для изменения размера будут просто вытекать черезкрая контейнера, перекрывающие другие контейнеры (переполнение: видимое).
Я также изменил логику z-index, поскольку теперь вам нужно установить z-index для контейнеров (который будет применяться ко всем дочерним элементам).элементы).По умолчанию у всех z-индекс равен 2. Когда div изменяется в исходном состоянии, я устанавливаю z-index его контейнера обратно в 2 после анимации, используя функцию обратного вызова для .animate ().Когда начинается изменение размера, все контейнеры сбрасываются в z-index 2, если один из них все еще возвращается в исходное состояние, для контейнера текущего изменяемого размера div устанавливается значение z-index 3, чтобы он отображался поверх всех остальных.
http://jsfiddle.net/x34d3/
HTML-разметка:
<div id="main" style="position:relative;z-index:1;">
<div class="container"><div id="lefttop" class="resizer">left top</div></div>
<div class="container"><div id="righttop" class="resizer">right top</div></div>
<p style="clear:both;"></p>
<div class="container"><div id="leftbottom" class="resizer">left bottom</div></div>
<div class="container"><div id="rightbottom" class="resizer">right bottom</div></div>
</div>
CSS:
.resizer { position:relative; border: 1px solid #000000; padding:10px; margin:0px; width:150px; height:150px; }
.container { position:relative; padding:0px; margin:8px; float:left; z-index: 2; width:172px; height:172px; }
JavaScript:
$(function(){
$(".resizer").mouseover(function() {
$(".container").css('z-index' , '2');
$(this).parent().css('z-index' , '3');
if(this.id == "lefttop"){
aoptions = {width: "340px", height: "340px", backgroundColor: "#CCCCCC", left: '0', top: '0'}
}else if(this.id == "righttop"){
aoptions = {width: "340px", height: "340px", backgroundColor: "#CCCCCC", left: '-=190', top: '0'}
}else if(this.id == "leftbottom"){
aoptions = {width: "340px", height: "340px", backgroundColor: "#CCCCCC", left: '0', top: '-=190'}
}else if(this.id == "rightbottom"){
aoptions = {width: "340px", height: "340px", backgroundColor: "#CCCCCC", left: '-=190', top: '-=190'}
}
$(this).css('z-index' , '99').animate(aoptions, 800);
}).mouseout(function(){
if(this.id == "lefttop"){
aoptions = {width: "150px", height: "150px", backgroundColor: "#FFFFFF", left: '0', top: '0'}
}else if(this.id == "righttop"){
aoptions = {width: "150px", height: "150px", backgroundColor: "#FFFFFF", left: '+=190'}
}else if(this.id == "leftbottom"){
aoptions = {width: "150px", height: "150px", backgroundColor: "#FFFFFF", left: '0', top: '+=190'}
}else if(this.id == "rightbottom"){
aoptions = {width: "150px", height: "150px", backgroundColor: "#FFFFFF", left: '+=190', top: '+=190'}
}
$(this).animate(aoptions, 800, function(){
$(this).parent().css('z-index' , '2');
});
});
});