Question

我在100％宽度和100％高度的容器上有一个jquery动画，并且位置绝对移动的子容器与容器一起移动但是具有两个时间位置绝对的孩子的孩子不移动，为什么呢？你怎么能绕过它？

$(document).ready(function() {
  var hash = location.hash;
  console.log(hash);
  $(window).on("hashchange", function() {
    hash = hash ? hash : "#page1";
    $(hash)
      //I have tried adding
      //.css("overflow","hidden");
      .animate({
        height: "hide"
      });
    hash = location.hash
    $(hash)
      //I have tried adding
      //.css("overflow","hidden");
      .animate({
        height: "show"
      });
  });
  hash ? $(hash).toggleClass("page-active") : $("#page1").toggleClass("page-active");
});

body,
html {
  width: 100%;
  height: 100%;
  text-align: center;
}

.page1 {
  width: 100%;
  height: 100%;
  background-color: cyan;
  display: none;
  position: relative;
}

.page2 {
  width: 100%;
  height: 100%;
  background-color: lime;
  display: none;
  position: relative;
}

.page-active {
  display: block;
}

a {
  color: black;
  position: absolute;
  top: 50%;
}

.hello {
  position: absolute;
  top: 3em;
  left: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div class="page1" id="page1">
    hello
    <div class="hello">
      <div class="i-stay">
        Why am I here
      </div>
    </div>
    <a href="#page2">go to page2</a>
  </div>
  <div class="page2" id="page2">
    hi
    <a href="#page1">go to page1</a>
  </div>
</body>

这里是jsfiddle

Answer 1

这是您已应用的CSS的结果，position: absolute是相对于最近的父亲position: relative的绝对位置。该链接会移动，因为它是绝对的，但使用top: 50%;的位置。现在，看看没有移动的对象的代码......

.hello {
    position: absolute;
    top: 3em;
    left: 3em;
}

...无论你的父元素有多高或多宽，3em都是3em。

jquery动画中儿童的孩子们保持不动

1 个答案: