為什么第一李元素不向下移動？

Question

這是我的代碼：

 <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>覆蓋？

Answer 1

您將第二個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>

為什么第一李元素不向下移動？

問題描述

1 個解決方案

解決方案1
1 已采納 2016-08-11 22:52:05

為什么第一李元素不向下移動？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-08-11 22:52:05

解決方案1
1 已采納 2016-08-11 22:52:05