html - 定位一个元素以便该元素不会覆盖侧边栏？

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