Javascript 如何创建固定浮动加号按钮？

我希望为我的移动应用程序创建一个浮动操作按钮。与Gmail和WhatsApp移动应用程序中使用的类似（参见图中的红色按钮）

我正在使用jQuery Mobile构建一个小应用程序，我希望该按钮可以将用户带到另一个页面。我已经研究了很长一段时间，结果喜忧参半，但主要的问题似乎是，按钮没有位于页面上所有其他内容的上方，而且一旦用户滚动页面，按钮也不会固定在某个位置

是否有人拥有任何可以提供帮助的资源或知识？多谢各位

---

这更像是一个CSS问题，而不是一个JS问题，尽管你可以用其中任何一个来解决它。在CSS中，按钮元素或包含它的任何元素都应该具有属性；位置：绝对位置；和z指数：x；（高于DOM中任何其他元素的z索引）。若您试图用JS解决这个问题，那个么您仍然必须拥有一个z-index属性，并且只有当and元素具有固定、绝对或相对位置属性时，该属性才有效。。。所以你也可以使用CSS。您可以使用js确定窗口的高度（移动设备上的设备高度，因为浏览器无法像桌面上那样调整大小），然后设置top:Xpx属性，以便无论设备如何，to按钮都显示在相同的位置

我想这会对你有所帮助。它有一个教程链接

要确保您的按钮高于所有其他元素，请将

z-index:999

添加到css中的按钮中

您可以将

z-index

视为层。 因此

z-index:2

元素将位于

z-index:1

元素之上

有关

z-index

css属性的更多详细信息，请转到。

您是否尝试使用css中的“固定”或“粘性”属性值将图像保持在相对于浏览器窗口或用户滚动位置的相对位置

希望这能有所帮助，这是我想到的第一个想法

给你：

请在此处阅读更多信息：

---

JQM

footer

已经有了

固定的

定位和正确的

z-index

，它与其他JQM小部件（如面板等）配合得很好。为什么不使用它呢

类

ui-btn-left

和

ui-btn-right

在

footer

中表现不好，因此我使用的是背景透明的网格。这种方法的优点是，如果以后需要，可以快速添加更多按钮

.ui页脚{
边框宽度：0！重要；
背景：透明！重要；
}
.ui-grid-d{
溢出：可见！重要；
背景：透明！重要；
}
.ui-grid-d>.ui-block-a，
.ui-grid-d>.ui-block-b，
.ui-grid-d>.ui-block-c，
.ui-grid-d>.ui-block-d，
.ui-grid-d>.ui-block-e{
文本对齐：居中！重要；
背景：透明！重要；
填料顶部：.3em；
垫底：9em；
}
.ui图标大{
高度：40px！重要；
宽度：40px！重要；
利润率顶部：-18px！重要；
边界半径：20px！重要；
}
.ui图标大：之后{
宽度：32px！重要；
高度：32px！重要；
背景尺寸：22px！重要；
背景色：#F4123D！重要；
背景色：rgba（244,18,61,0.8）！重要；
利润率顶部：-16px！重要；
左边距：-16px！重要；
}

页面内容

如果它在屏幕上停留在一个固定的位置，即css

位置：固定

，并且位于所有其他字段的顶部，则意味着它的z-index比页面上的任何其他字段都大。它需要

固定

位置，而不是绝对位置，以便在滚动时保持在相同的位置。此外，你不需要抓住窗口的高度，把它放在屏幕的底部。您可以为此设置

底部：0

。