Javascript 为什么.append（）会更改在jquery中克隆的元素的位置？_Javascript_Jquery_Position_Append

Javascript 为什么.append（）会更改在jquery中克隆的元素的位置？

javascript jquery

Javascript 为什么.append（）会更改在jquery中克隆的元素的位置？,javascript,jquery,position,append,Javascript,Jquery,Position,Append,我目前正在尝试克隆一个元素，并将其放置在原始元素之下（或之上），只需添加样式“position:absolute”和“zIndex-1”，但它不起作用。我试着检查附加前后的位置：它实际上在没有任何解释的情况下发生了变化。我的意思是，我希望克隆对象的位置保持不变那么，为什么.append（）会更改在jquery中克隆的元素的位置呢提前感谢您的帮助：） jQuery测试函数单击（）{ 变量$pulsante_temp=$（“#按钮1”）.clone（）； $（“#div2”）.html（“

我目前正在尝试克隆一个元素，并将其放置在原始元素之下（或之上），只需添加样式“position:absolute”和“zIndex-1”，但它不起作用。我试着检查附加前后的位置：它实际上在没有任何解释的情况下发生了变化。我的意思是，我希望克隆对象的位置保持不变

那么，为什么.append（）会更改在jquery中克隆的元素的位置呢

提前感谢您的帮助：）


jQuery测试
函数单击（）{
变量$pulsante_temp=$（“#按钮1”）.clone（）；
$（“#div2”）.html（“顶部：+$pulsante_temp.position（）。顶部+”左侧：+$pulsante_temp.position（）。左侧）；
$pulsante_临时css({
“位置”：“绝对”，
“zIndex”：“-1”
});
$（“#div1”）。追加（$pulsante_temp）；
$（“#div2”）.html（$（“#div2”）.html（）+”后追加：top:“+$pulsante_temp.position（）.top+”左：“+$pulsante_temp.position（）.left”）；
$pulsante_temp.animate({
顶部：“-=10px”
}, 1000);
}
试验

为什么您希望职位保持不变？这不是position:absolute的意思。如果没有通过

left:

和

top:

或其他方式显式放置绝对定位对象，则其位置将与DOM中该点的非绝对元素完全相同。请注意，克隆元素时，不会复制其位置；元素的位置与它在DOM结构中的角色不同。可能我错了，但我希望位置是相同的，因为我设置了“position:absolute”和“zindex:-1”。我的意思是，我认为元素的位置将与它在新文档中的位置相同（不同的zindex应该“创建”不同的层，因此两个元素不能“碰撞”在相同的空间上。但是，运行上面的代码，您将看到按钮在被克隆后立即具有位置x0 y0，并且在追加后具有不同的位置。因此，在克隆时，位置似乎保持不变，但在追加时会发生变化。这不是

z-index

所做的。

z-index

与此无关在页面上定位；层不会“填满”独立地，换句话说。

z-index

所做的就是确定应该在什么上面显示什么。啊，好了，现在我更清楚了。所以用这两个属性附加一个元素会给它一个新的位置，然后它会被移动到比其他元素更高或更低的位置。然后我会尝试不同的解决方案。谢谢。

<!DOCTYPE html>
<head>
<title>jQuery Test</title>
   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
   <script type="text/javascript" language="javascript">
    function clicked() {
        var $pulsante_temp = $("#button1").clone();
        $("#div2").html("top: " + $pulsante_temp.position().top + " left: " + $pulsante_temp.position().left);
        $pulsante_temp.css({
            "position" : "absolute",
            "zIndex" : "-1"
        });
        $("#div1").append($pulsante_temp); 

        $("#div2").html($("#div2").html() + " After append: top: " + $pulsante_temp.position().top + " left: " + $pulsante_temp.position().left);

        $pulsante_temp.animate({
            top: "-=10px"
        }, 1000);
    }
   </script>
</head>
<body>
   <button id="button1" onclick="clicked()" style="z-index: 1;">TEST</button>
   <div id="div1" style="height: 30px;"></div>
   <div id="div2"></div>
</body>
</html>