如何将贝宝迷你购物车（贝宝实验室）放在首位答案

【问题标题】：How to keep paypal mini cart (paypal labs) on top如何将贝宝迷你购物车（贝宝实验室）放在首位
【发布时间】：2011-11-10 16:24:42
【问题描述】：

我已将 paypal 迷你购物车集成到我的网站中，但由于某种原因它不在顶部，我已将 z-index 更改为尽可能高，但仍然没有结果。

除了导航栏中的文本（例如 HOME 等）之外，它似乎覆盖了所有内容，当 class=current 时，它似乎也覆盖了它。

任何有关如何解决此问题的帮助将不胜感激！

当您向购物车添加选项时，然后调整窗口大小，使购物车与导航区域重叠

【问题讨论】：

你有一个例子吗 - 一个 jsfiddle 会有所帮助
是的，抱歉 - 现在请检查说明。

标签： html css paypal

【解决方案1】：

您的样式表中存在以下问题：

ul#navigation {
  float: right;
  position: relative;
  z-index: 30;
  margin-top: 2px;
  margin-right: 117px;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
}

您的z-index 正在将菜单放在贝宝购物车上。删除此 z-index 将解决您的问题。好吧，它至少对我来说是在我的 Chrome 调试器中禁用该属性。

【讨论】：

非常感谢，我注意到了一个问题 - 它位于主页上的滑块下方，但我确信我可以通过对该区域执行相同的操作来对其进行排序。
真正的解决方案是设置适当的 Z-index 数字。我所做的是使用 10 的增量，因此，基础层 z-index：0，然后是菜单，例如：z-index：10；，然后接下来是 20 等等。这比如果你有 1,2,3,4,5,6,7,8,9,10 更容易，就好像你意识到你错过了一些你会有很多 z-indexes 的东西改变。以我的方式，您最多可以插入 9 个东西而不会产生冲击。
感谢您的额外提示 :) 我将来会使用它！