定位一个项目以使该项目不会覆盖侧边栏？答案

【问题标题】：Positioning an item so that the item doesn't override the sidebar?定位一个项目以使该项目不会覆盖侧边栏？
【发布时间】：2014-07-06 19:44:32
【问题描述】：

我有一个隐藏在侧边栏上的项目（一个对话气泡，使用 CSS 和 html 制作），当您将鼠标悬停在侧边栏上时它就会出现。

#sidebar .bubble {
 opacity:0.0;
 position: relative;
 background-color:#eee;
 margin: 0;
 padding:10px;
 text-align:center;
 width:180px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
 box-shadow: 0px 0 3px rgba(0,0,0,0.25); 
 }
.bubble:after {
 position: absolute;
 display: block;
 content: "";  
 border-color: #eee transparent transparent transparent;
 border-style: solid;
 border-width: 10px;
 height:0;
 width:0;
 position:absolute;
 bottom:-19px;
 left:1em;
 }

 #sidebar:hover .bubble {
  opacity:1.1;
  position: relative;
  background-color:#eee;
  margin: 0;
  padding:10px;
  text-align:center;
  width:180px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  box-shadow: 0px 0 3px rgba(0,0,0,0.25); 
  }

而且我在定位方面遇到了一些麻烦。我喜欢在侧边栏悬停时出现对话气泡，但它会出现在侧边栏中并延长侧边栏。

我只是想知道是否有办法将它放在一边，而不是加长侧边栏，像这样？

我尝试过固定定位和绝对定位，但都不起作用，只是导致它下面的侧边栏图像变大了。有没有办法定位对话气泡？

【问题讨论】：

显示您的 html，以便我们有效地帮助您。将气泡 css 从 position: relative; 更改为 position: absolute;，然后使用 top 和 left 将其放置在您想要的位置。使用绝对位置时事情发生变化的原因是侧边栏没有position: relative;，或者是由于您的.bubble:after css。
它应该适用于绝对定位。请在此处创建 html 和 css：jsfiddle.net，以便我们了解您的问题。
我的代码不会出现在 jsfiddle 上。我可以将链接粘贴到某处并给你一个代码的直接链接吗？ @MarcBachmann
你可以找到我的邮箱here。我也在github。

标签： html css hover position positioning

【解决方案1】：

您可以通过这种方式在气泡上使用 position: absolute，在导航容器上使用 position: relative。请记住，具有绝对定位的元素对于其他元素将是“不存在的”，因此您必须给它们 z-index: 3/put any number u like above 2/ 。要从页面中“删除”气泡，请使用 display: none 但首先将它们定位好。如果你觉得困难，请再次寻求帮助：D

【讨论】：