使CSS弹出窗口保持在div的顶部

Question

大家看一下附图。有点难以解释如此附加图像。

我正在寻找的是，当您将鼠标悬停在旗帜图标上时，会出现一个弹出窗口。这是一个简单的CSS弹出窗口。基本上，有一个包含图标和弹出窗口的包装。弹出窗口绝对定位。包裹相对定位。弹出窗口有top:0。所以它从包装div的顶部开始。我想要的是，弹出窗口应该粘贴到包裹div的顶部（从三角形）。弹出窗口的高度未知，这取决于内容。

<div class="bjper_iconwrap">
   <span id="bjhoverimg" class="icon-flag"></span>
   <div id="bjhoverpop" class="bjoffersbigpop">
   <img class="pinktri" src="/images/pink_triangle.png">
   <p>% Special Offer</p>
   <ul>
      <li><small>£5 Voucher</small>: <small>Buy 10 VCHR get 10 SIMs free</small></li>          
   </ul>
   </div>
</div>

.bjper_iconwrap {
  position: relative;
}
.bjoffersbigpop {
  background: #d1005c;
  padding: 20px;
  color: #fff;
  min-height: 200px;
  position: absolute;
  top: 0px;
  left: -47px;
  width: 300px;
  z-index: 100;
}

Answer 1

如果您希望底部从顶部开始，而不是使用Role使用top:0，然后使用bottom:100%;减去箭头的大小：

margin-top

Answer 2

我认为你可以将弹出窗口放在旗帜中：

<div class="bjper_iconwrap">
   <span id="bjhoverimg" class="icon-flag">
      <div id="bjhoverpop" class="bjoffersbigpop">
   </span>
   <img class="pinktri" src="/images/pink_triangle.png">
   <p>% Special Offer</p>
   <ul>
      <li><small>£5 Voucher</small>: <small>Buy 10 VCHR get 10 SIMs free</small></li>          
   </ul>
   </div>
</div>

并按bottom而不是top定位：

.bjoffersbigpop {
  background: #d1005c;
  padding: 20px;
  color: #fff;
  min-height: 200px;
  position: absolute;
  bottom: 100%;
  left: -47px;
  width: 300px;
  z-index: 100;
}

Answer 3

你可以使用jquery

$(document).ready(function(){
  var height= $('.bjoffersbigpop').height();
  $('.bjoffersbigpop').css('top', - height + 'px');
})