jQuery動畫和Z索引問題/相對定位

Question

我想要獲得一個div來包含其他使用position：relative的鼠標懸停。不幸的是，它只適用於最後一個div。如果您將鼠標懸停在其他人身上，他們只會覆蓋在他們之前宣佈的div。

的代碼是在這裏：http://jsfiddle.net/YuKaR/3/

絕對定位工作得很好，但不幸的是我不能使用絕對定位對於這個特定的應用程序。

任何人都知道我在做什麼錯了？感謝您的時間。

Answer 1

相對定位的問題是，位置相對於其正常位置，這意味着如果您調整中間元素的大小，瀏覽器將移動並重新處理它後面的所有內容。

需要做一些改變才能使其發揮作用。如果你想使用相對定位，你必須將你的調整大小div封裝在固定大小的容器中，所以當它們調整大小時，它們不會破壞元素流。你的div有150px的寬度和高度，固定大小的容器必須足夠大以容納它，假設默認盒子模型爲150px + 10px * 2 padding + 1px * 2 border = 172px。由於元素流由容器控制，我將邊界移至CSS中的容器。

通過額外的固定大小的div包裹其中，元素流永遠不會改變，你的調整div一定只是通過容器的邊緣流血，重疊其他容器（溢出：可見）。

我也改變了你的z-index邏輯，因爲你現在需要爲容器設置z-index（它將適用於所有子元素）。默認情況下，所有的z-index都是2.當div重新調整到原始狀態時，我使用.animate（）上的回調函數將其容器的z-index設置回到2。當調整開始，所有的集裝箱被重置爲Z-指數2的情況下，有一個還是動畫恢復到原來的狀態，當前調整div的容器設定爲z指數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'); 
     }); 
    }); 
}); 

Answer 2

花了我一段時間，但我終於明白了。看看這個working jsFiddle demo：

HTML：

<div id="main"> 

    <div class="overlay"><div id="lefttop">left top</div></div> 
    <div class="overlay"><div id="righttop">right top</div></div> 
    <p></p> 
    <div class="overlay"><div id="leftbottom">left bottom</div></div> 
    <div class="overlay"><div id="rightbottom">right bottom</div></div> 

</div> 

CSS：

* { 

    margin: 0px; 
    padding: 0px; 
    border: none; 
    z-index: -1; 
} 

p { clear: both; } 

#main { 

    float: left; 
    margin: 50px; 
    background: black; 

} 

#main div { 

    position: relative; 
    float: left; 

    height: 150px; 
    width: 150px; 

} 

.overlay { 

    height: 0; 
    overflow: visible; 
    position: relative; 
    z-index: 99; 

} 

#lefttop { background: yellow; } 
#righttop { background: green; } 
#leftbottom { background: red; } 
#rightbottom { background: blue; } 

的jQuery：

var $divs = $("div", ".overlay"), 
    optionsOver = { 

     width: "300px", 
     height: "300px" 

    }, 
    optionsOut = { 

     width: "150px", 
     height: "150px" 

    }; 

$divs.hover(function() { 

    $divs 
     .stop(true,true) 
     .parent() 
     .css({"z-index" : "1"}); 

    if (this.id == "lefttop") { 

     optionsOver.left = "0px"; 
     optionsOver.top = "0px"; 

    } else if (this.id == "righttop") { 

     optionsOver.left = "-=150px"; 
     optionsOver.top = "0px"; 

    } else if (this.id == "leftbottom") { 

     optionsOver.left = "0px"; 
     optionsOver.top= "-=150px"; 

    } else if (this.id == "rightbottom") { 

     optionsOver.left = "-=150px"; 
     optionsOver.top= "-=150px"; 

    } 

    var $this = $(this); 
    $this.stop(true,true); 
    $this.parent().css({"z-index" : "99"}); 
    $this.animate(optionsOver, 400); 

}, function() { 

    if (this.id == "lefttop") { 

     optionsOut.left = "0px"; 
     optionsOut.top = "0px"; 

    } else if (this.id == "righttop") { 

     optionsOut.left = "+=150px"; 
     optionsOut.top = "0px"; 

    } else if (this.id == "leftbottom") { 

     optionsOut.left = "0px"; 
     optionsOut.top= "+=150px"; 

    } else if (this.id == "rightbottom") { 

     optionsOut.left= "+=150px"; 
     optionsOut.top = "+=150px"; 

    } 

    $(this) 
     .stop(true,true) 
     .animate(optionsOut, 400, function() { 
      $divs.parent().css({"z-index" : "1"}); 
     }); 

});