Html 定位一个项目，使该项目不会'；你不能覆盖侧边栏吗？

我有一个隐藏在侧边栏上的项目（一个语音气泡，使用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); 
  }

我的定位有点问题。 我喜欢侧边栏悬停时出现语音气泡，但它出现在侧边栏中并延长侧边栏

#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); 
  }

我只是想知道是否有一种方法可以让它稍微偏侧一点，而不是延长边栏，像这样

---

我尝试过固定定位和绝对定位，但都不起作用，只是导致它下面的边栏图像变大了。是否有任何可能的方法来定位语音气泡？

有这样一种方法，您可以在气泡上使用posotion:absolute，在导航容器上使用position:relative。请记住，对于其他元素，具有绝对定位的元素将是“非激励的”，因此您必须给它们z索引：3/将任何您喜欢的数字放在2/以上。要从页面中“删除”气泡，请使用显示：无，但首先要对其进行精细定位。如果你觉得很难再次寻求帮助：D

显示你的html，这样我们可以有效地帮助你。将气泡css从

位置更改为：相对至
位置：绝对，然后使用
顶部
和
左侧
将其定位在所需位置。使用“绝对位置”时情况会发生变化的原因是侧边栏没有
position:relative，或由于您的
。气泡：在
css之后。它应该与绝对定位一起工作。请在这里创建html和css：这样我们就可以理解你的问题。我的代码不会出现在JSFIDLE上。我是否应该将链接粘贴到某个地方，并给你一个直接指向代码的链接@你可以找到我的电子邮件。我也是。