定位项目以使项目不会覆盖侧边栏？

Question

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

我对定位有些麻烦。 我喜欢侧边栏上出现的语音气泡悬停，但它出现在侧边栏中并延长侧边栏。

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

我尝试过固定定位和绝对定位，但它不起作用，只是简单地导致其下方的侧边栏图像变大。有没有办法定位讲话泡泡？

Answer 1

你可以在气泡上使用 posotion：absolute ，在导航容器上使用 position：relative 。请记住，具有绝对定位的元素对于其他元素将是“非强制的”，因此您必须为它们提供z-index：3 / 将任何数字设置为高于2 /。要从页面“移除”气泡，请使用 display：none ，但首先要将它们放好。如果你发现很难再次寻求帮助：D