为什么第一个元素不会向下移动？

这是我的代码：为什么第一个元素不会向下移动？

<html> 
 
    <head> 
 
     <style> 
 
      ul,li { 
 
       position:relative; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <ul> 
 
      <li class="c1">This is 1</li> 
 
      <li class="c2">This is 2</li> 
 
      <li class="c3">This is 3</li> 
 
     </ul> 
 
     <br> 
 
     <button>Move</button> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
      $("button").on("click",function(){ 
 
       $c = $(".c2").clone(true); 
 
       $c.attr({class:""}); 
 
       $c.insertAfter(".c2"); 
 
       var y = $(".c2").position(); 
 
       var x = ($(".c2").insertBefore(".c1")).position(); 
 
       $(".c2").hide(); 
 
       $c.css({position:"absolute"}).animate({"top":x.top,"left":x.left},{duration:1000}); 
 
      }) 
 
     </script> 
 
    </body> 
 
</html>

为什么<li class="c1">This is 1</li>不向下移动？并与<li class="c2">This is 2</li>重叠？

来源

2016-08-11 Ehsan

你检查了答案吗？ – Dekel

是的，坦克you.Dekel – Ehsan

您将第二个li元素定位为absolute，因此它与第一个元素重叠。

这是HTML的结果（您点击该按钮后）：

ul,li { 
 
    position:relative; 
 
}

<ul> 
 
    <li class="c2" style="display: none;">This is 2</li> 
 
    <li class="c1">This is 1</li> 
 
    <li class="" style="position: absolute; top: 0px; left: 40px;">This is 2</li> 
 
    <li class="c3">This is 3</li> 
 
</ul>

如果你愿意，你可以使用此代码的两个元素之间交换做到这样：

$("button").on("click",function(){ 
 
    c1pos = $(".c1").position(); 
 
    c2pos = $(".c2").position(); 
 
    
 
    $c1 = $(".c1").clone(true); 
 
    $c1.attr({class:""}); 
 
    $c1.insertAfter(".c1"); 
 
    
 
    $c2 = $(".c2").clone(true); 
 
    $c2.attr({class:""}); 
 
    $c2.insertAfter(".c2"); 
 
    
 
    $(".c1,.c2").css('visibility', 'hidden'); 
 
    
 
    $c1.css({position:"absolute", "top":c1pos.top,"left":c1pos.left},{duration:1000}); 
 
    $c2.css({position:"absolute", "top":c2pos.top,"left":c2pos.left},{duration:1000}); 
 
    
 
    $c1.css({position:"absolute"}).animate({"top":c2pos.top,"left":c2pos.left},{duration:1000}); 
 
    $c2.css({position:"absolute"}).animate({"top":c1pos.top,"left":c1pos.left},{duration:1000}); 
 
})

ul,li { 
 
    position:relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<ul> 
 
    <li class="c1">This is 1</li> 
 
    <li class="c2">This is 2</li> 
 
    <li class="c3">This is 3</li> 
 
</ul> 
 

 
<button>Move</button>

来源

2016-08-11 22:52:05 Dekel

为什么第一个元素不会向下移动？

回答

相关问题