jQuery/CSS在幻灯片之间的转换扰乱了位置:修复了幻灯片内部的性能

Issue with jQuery/CSS transitions between slides disrupting position:fixed performance inside slide

本文关键字：幻灯片 性能 位置 内部 CSS 之间 jQuery 转换 乱了      更新时间：2024-01-08

嗨，我正在处理页面上元素之间的"页面"样式转换。我的方法基本上是这样的，这很好，但当我把位置"固定"的东西放在其中一个"页面"内时，功能就不会发生——它的工作方式更像是绝对定位。代码基本上是。。

<nav id="navigation-bar">
    <!-- Content Goes Here --->
</nav>
#navigation-bar {
    position: fixed;
    top: 0;
    width: 100%;
}

有人知道是否有解决方案吗？或者，如果不是一个可能的替代方案？如果你把导航栏放在"页面"之外，它就可以工作了，但我不确定如何把#导航栏链接到与幻灯片同时/风格的"转换"。我还认为这会让事情变得更复杂——移动视图上还有一个元素需要在页面中才能工作，它也是位置固定的，我需要一种基本上可以定位html的方法在面板/页面内部，但可以固定定位并工作。

position:fixed就是这样提取所有DOM的元素的。

位置为固定的元素相对于视口是固定的。即使文档滚动，它也会保持原样。

在另一侧，position:absolute能够提取元素，但是相对于另一个包含块来定位它。

具有position:absolute的元素的位置和尺寸是相对于其包含块的，而具有position:fixed的元素的定位和尺寸总是相对于初始包含块的。这通常是视口：浏览器窗口或图纸的页面框。为了演示这一点，在下面的示例中，您将固定其中一个元素。你会把另一个弄得很高，以便形成滚动条，更容易看到它的效果。

因此，如果在每个div中有一个固定位置的元素，这并不重要，因为它是相对于主容器提取和定位的。那么你能做的最好的事情就是使用position:absolute。

相关文章：