我在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
最佳答案
这是您应用CSS的结果，position: absolute是相对于具有position: relative的最近父级的绝对位置。链接移动是因为它是绝对的，但使用的是top: 50%;位置。现在，查看不会移动的对象的代码...
.hello {
position: absolute;
top: 3em;
left: 3em;
}
... 3em是3em，无论您的父元素有多高或多宽。
关于javascript - jQuery动画中的 child 的子代保持不变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48272166/