Question

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

绝对定位工作正常，但不幸的是我不能对这个特定的应用程序使用绝对定位。

任何人都知道我做错了什么？谢谢你的时间。

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以使其显示在所有其他容器之上。 / p>

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"});
        });

 });

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

2 个答案: