I'm experiencing an issue with a jquery animation on containers that are set to 100% width and height. Specifically, the children elements that have position absolute move with the container, but when a child of a child has two instances of position absolute, it doesn't move in the expected manner. Does anyone know why this might be happening and how to work around it?
$(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>