爲什麼第一個元素不會向下移動？

這是我的代碼：爲什麼第一個元素不會向下移動？

<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

爲什麼第一個元素不會向下移動？

回答

相關問題