如何使用左/上重新定位相对 DIV？

Question

我有一个带有属性 position:relative; 的 div。现在，有三个这样的 div。它们都有一个唯一的 ID 等。

现在，如果我单击一个 div，我希望它以动画方式移动到文档中的某个位置。虽然我无法确定左侧/顶部值，因为如果我使用“顶部”和“左侧”，它会将左侧相对设置为其父级位置。

也许有点不清楚，但这就是我得到的。

将移动的可点击 DIV 的 CSS。

div#left_hldr .switch_project {
  z-index: 1001;
  position: relative;
  margin: 10px 0px 0px 0px;
  cursor: pointer;
}

// Open project.
$(".switch_project").live('click', function() {

  // Get the ID value.
  var More_Id = $(this).attr("id");

  // Explode the Id.
  var Id_Split = More_Id.split("_");

  // Get the project ID.
  var Project_Id = Id_Split[2];

  /*
      Replacement of the switch project div.
      1 ) Define the current position.
      2 ) Define the new position.
      3 ) Replace the DIV to the new position.
      4 ) Fade the new page in.
      5 ) Put the DIV back to its original position.
  */

  // Current Position.
  var Ori_Left = $(this).offset().left;
  var Ori_Top = $(this).offset().top;

  // New Position.  [ Based on the content_hldr container ]
  var New_Top = $("div#content_hldr").offset().top;
  var New_Left = $("div#content_hldr").offset().left;

  // Define the current div.
  var Div_Rep = $(this);

  // Hide the More Info tab.
  $(Div_Rep).children(".more_info").fadeOut("fast");

  // Fade content out.
  $("div#content_hldr").fadeOut("fast");

  // Replace the div.
  $(Div_Rep).animate({
    top: New_Top,
    left: New_Left
  }, "slow", function() {

    // Load Home page in.
    $("div#content_hldr").load("content/content.projects.php?id=" + Project_Id, function() {

      // Re-define Cufon.
      Cufon.replace('h2');
    });
    // Fade in the content.
    $("div#content_hldr").fadeIn("fast", function() {

      // Hide the replaced div.
      $(Div_Rep).hide();

      // Replace it back to its position.
      $(Div_Rep).css({
        top: Ori_Top,
        left: Ori_Left
      });

      // Show the More Info tab again.
      $(Div_Rep).children(".more_info").show();

      // Fade back in.
      $(Div_Rep).fadeIn("medium");
    });
  });
});

Answer 1

...它将相对地将左侧设置为其父级位置。

事实上，没有。如果您将 left 和 top 与 position:relative 元素一起使用，它们会将其从原本所在的位置偏移（如果不是）定位（例如，在静态流中），同时继续在静态流中保留其空间。这是一个微妙但重要的区别（对于拖放非常有用）。

如果你想将它动画到文档的左上角，你可以计算出它的偏移量（通过 offset），然后将它们作为 left 和 top 的负数提供，因为当然，如果它位于（例如）[100,50] ，然后与其默认位置相比将其定位在 [-100,-50] 将...将其置于 [0,0]。

像这样：

$("selector_for_your_divs").click(function() {
    var pos, $this;
    $this = $(this);
    pos = $this.offset();
    $this.animate({
        left: "-" + pos.left + "px",
        top:  "-" + pos.top  + "px"
    });
});

Live example

同样，如果你想将它移动到另一个元素所在的位置，只需从另一个元素的位置 - 为您提供要应用的增量：

$("selector_for_your_divs").click(function() {
    var mypos, otherpos, $this;

    // Move to the target element
    $this = $(this);
    pos = $this.offset();
    otherpos = $('selector_for_other_element').offset();
    pos.left = otherpos.left - pos.left;
    pos.top  = otherpos.top  - pos.top;
    $this.animate({
        left: pos.left + "px",
        top:  pos.top  + "px"
    });
});

实时示例