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

时间:2014-05-18 22:59:34

标签: html css hover position positioning

我有一个隐藏在侧边栏上的项目(使用CSS和html制作的语音气泡),当您将鼠标悬停在侧边栏上时会显示该项目。

speech bubble when sidebar hover

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

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

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

positioning

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

1 个答案:

答案 0 :(得分:0)

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