在滚动条附近显示div

时间:2016-01-19 06:53:03

标签: html css

.container{
  height: 700px;
  width:100%;
}
.need-help-qu {
  background-color:#042E49;
  color:#ffffff;
  padding:0px 10px;
  font-size: 20px;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all .8s ease;
  -moz-transition: all .8s ease;
  -ms-transition: all .8s ease;
  -o-transition: all .8s ease;
  transition: all .8s ease;
  float:left;
  height:28px;
}
.need-help {
  float:left;
  background-color:#06507D;
  color:#ffffff;
  padding:5px 10px;
  overflow: hidden;
}
.need-help-full {
  right:-95px;
  position:fixed;
  top:40%;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all .8s ease;
  -moz-transition: all .8s ease;
  -ms-transition: all .8s ease;
  -o-transition: all .8s ease;
  transition: all .8s ease;
}
.need-help-full:hover {
  right:0;
}
<div class"container">
  Test sscroll
</div>
<div class="need-help-full">
  <a href="#">
    <span class="need-help-qu p-n-b">?</span>
    <span class="need-help text-sm p-n-r">NEED A HELP</span>
  </a>
</div>

我有一个带文字的div和'?'在右侧中心标志与固定位置。当用户将鼠标悬停在“?”上时签署div从右到左出现过渡(如社交图标)。它工作得很好。

但是当滚动条进入小屏幕时,整个div会越过滚动条而不是靠近滚动条。

任何人都可以帮助我吗? 提前谢谢。

1 个答案:

答案 0 :(得分:0)

添加

.need-help-full {
    z-index:-1;
}