jQuery动画和z-index /相对定位的问题

Question

我正在尝试使用position:relative来获取div以包含鼠标悬停时的其他div.不幸的是它只适用于最后一个div.如果将鼠标悬停在其他鼠标上,它们只会覆盖在它们之前声明的div.

代码在这里:http://jsfiddle.net/YuKaR/3/

绝对定位工作正常,但不幸的是我无法使用绝对定位这个特定的应用程序.

谁知道我做错了什么？感谢您的时间.

Answer 1

相对定位的问题是位置相对于它们的正常位置,这意味着如果你在中间调整元素的大小,浏览器将移动并重新流动它之后的所有内容.

需要进行一些更改才能使其正常工作.如果要使用相对定位,则必须将调整大小的div包装在固定大小的容器中,因此当它们调整大小时,它们不会破坏元素流.你的div有150px的宽度和高度,固定大小的容器必须足够大才能容纳它,假设默认的盒子模型是150px + 10px*2填充+ 1px*2 border = 172px.由于元素流由容器控制,我将边距移动到css中的容器.

通过将它们包装在一个额外的固定大小的div中,元素流将永远不会改变,你的大小调整div只会渗透容器的边缘,与其他容器重叠(溢出:可见).

我还改变了你的z-index逻辑,因为你现在需要为容器设置z-index(这将适用于所有子元素).默认情况下,一切都有z-index为2.当div调整回原来的状态时,我在动画后使用.animate()上的回调函数将其容器的z-index设置回2.当调整大小开始时,所有容器都重置为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');
         });
     });
 });