HTML&CSS：fullpage.js 插件上浮动 div 的基础

Question

我正在尝试使用 foundation 作为我整页顶部的浮动 div 基金会中有一些互动元素（改变文字大小等）

到目前为止一切正常唯一的问题是当 foundation div 中的文本移动时幻灯片的内容也会随之移动...（我希望幻灯片的内容保持在同一个位置）

我的div到底是不是飘了？现在一直在寻找几个小时，但无法真正找到问题所在。任何人都知道我做错了什么？

顺便说一句，交互基础不影响滚动旋转'Athene'文本（=很好）

这是css我用来打底的div

#foundation {
    position:absolute;
    height: 100%;
    display:block;
    width: 100%;
    background: transparent;
    z-index:999;
}

提前致谢并向大家致以最诚挚的问候

Answer 1

页面本身非常混乱。你永远不应该在元素内部的正文中间使用 <style> 编写 CSS。您也不应该在正文中间链接整个 CSS 库。

所有相关 CSS 都属于一个 <style> 头部。所有链接的库也根据它们对另一个的依赖性按顺序属于头部。

与 JavaScripts 相同。如果 JavaScript 库决定了其余脚本如何相互反应，例如 jQuery，它们属于单独链接在头部。否则，它们需要在正文底部按依赖顺序排列，就在 </body>.

上方

由于这种混乱，您的 #foundation 元素可能无法正常工作。按照 Foundation's Getting Started 第二章了解您应该将这些脚本和链接库放在何处。我建议您在使用这个庞大的框架之前阅读整个文档。

最后，对于具有 position: absolute 的元素，您应该考虑实际定义它们的位置：

#foundation {
  position: absolute;
  top: 0
  left: 0
}

当您完成所有这些操作后，如果您的问题仍未解决，请更新您的问题，我会进一步调查。但是现在你有一堆乱七八糟的 CSS 规则，它们可能相互冲突并产生了一个看不见的问题。

HTML&CSS: Foundation as floating div on the fullpage.js plugin