出于学习目的，我一直在玩不同的CSS过渡效果。但是，我无法弄清楚这一点。
一个简单的设置：顶部导航带有切换图标，以显示侧边栏<aside>。边栏项目包装在<div id='swap'>中。侧边栏项目之一必须在底部，我将其位置设置为固定。这是jQuery：
(function() {
$(".toggle-wrap").on("click", function() {
$("i").toggleClass("fa-bars fa-times");
$("main").toggleClass("main push");
$("aside").animate({ width: "toggle" }, 200);
$("#swap").toggleClass("hidden shown");
});
})();
单击可将主要内容快速移至右侧，并使
<aside>本身可见，然后通过过渡（cubic-bezier(0.32, 1.25, 0.375, 1.15)）使侧边栏项目可见麻烦所在：三次方贝塞尔曲线做出了一个“好玩的”入口，但它只对底部的固定项溢出，而
overflow:hidden似乎没有任何作用。过渡后，它就位。这是屏幕截图：我的问题：如何固定边界以防止边界溢出？
I have made a codepen to have the entire code available。
最佳答案
使用position:fixed时，该元素将相对于视口放置，因此其父容器的溢出将不起作用。
要解决此问题，只需将开关切换到position:absolute，您的元素将相对于最近定位的祖先进行定位，在您的情况下，它是aside元素，而该元素的overflow:hidden将隐藏您溢出的边框。
为什么两个位置值都给出相同的结果？
仅仅是因为在您的情况下，您仅应用了bottom:0，并且由于您的aside占据了屏幕的整个高度，所以bottom:0将指向屏幕底部的同一位置。您可以稍微调整aside的高度，在这种情况下，您会注意到fixed和absolute之间的差异。
关于jquery - 包含CSS过渡边框(固定div除外)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48591336/