令人困惑的定位问题[关闭]答案

【问题标题】：Confusing Positioning Issues [closed]令人困惑的定位问题[关闭]
【发布时间】：2012-04-18 07:22:05
【问题描述】：

仅适用于 CHORME 和 Firefox

考虑以下链接http://indivar.biz/deva/node/41，然后将鼠标悬停在“培训计划”选项卡上，它将打开子菜单。打开的子菜单在“即将到来的节目”下方打开，紫色框下方的标题。并且需要正确打开紫色盒子上方。

那么，请您告诉我，这个问题将如何解决。子菜单在主页上工作正常，但在内部页面上。

谢谢巴尔卡尔

【问题讨论】：

【解决方案1】：

将此添加到您的 CSS 中。

#background-bg {
  {
   position: relative;
    z-index: 100;
  }
#content > .wrapper {
  {
   position: relative;
    z-index: 10;
  }

虽然建议不要使用 ID 进行样式设置，但您可以使用此补丁。不会有问题的。

【讨论】：

为什么不建议使用 id 进行样式设置？
使用 CSS ID 选择器编写的样式不可重用。此外，代码变得更难维护。您可以阅读这篇文章以获得更多见解。 oli.jp/2011/ids
我不同意，ID 样式对于唯一的非重复元素是完全有效的。
我从不质疑其有效性。我只是说这是可取的。
我同意不建议非常普遍地使用 ID 作为 CSS 选择器。只需检查这个小提琴 (jsfiddle.net/mknut/7) 我已将颜色应用于 ;一次使用 id 选择器，一次使用特定的类选择器。由于某种原因，使用 ID 选择器定义的 css 会覆盖使用类选择器定义的样式，这可能不会导致 100 行 css 出现问题，但当您网站的每个页面都有超过 1000 行的通用 css 时可能会导致问题。跨度>

【解决方案2】：

在这个类上.node-type-page #background-bg z-index 为0，增加到1或更多，问题将得到修复

【讨论】：

【解决方案3】：

wrapere position relative和z-index就像这样

#content  >  .wrapper {
        margin: 0 auto;
        position: relative;
        width: 960px;
        z-index: -1;
    }

【讨论】：