在图像顶部叠加弹出框

Question

我正在尝试创建一个图片链接，其中包含一个问号字形，用户可以点击它来显示带有说明的弹出框。

现在，问号字形显示在底部，但理想情况下，我希望它位于“我的信息”链接标题旁边。

我的代码如下所示：

a.picture {
  margin: 20px 0;
  position: relative; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: top;
}

a.picture > h3 {
  margin: 0;
  width: 100%;
  text-align: center;
}

a.picture > h3 span {
   display:block;
   color: white; 
   font-weight: bold;  
   background: $blue;
   padding: 10px; 
}

    <a ng-if="::(options.link_template == 'Picture')" ng-href="{{::data.href}}" class="picture {{::options.class_name}}" target="{{::data.target}}" >
        <h3><span>{{::options.title}}</span></h3> 
      <img src="{{::options.picture}}" height="100%" width="100%"/>
        <div><a tabindex="0" class="glyphicon glyphicon-question-sign" role="button" data-toggle="popover" data-placement="top" data-trigger="focus" title="My Information" data-content="This is what this link will display"/></div>      
    </a> 

为了让弹出框字形出现在标题旁边，我必须在 css 中做什么？我尝试将 glyphicon 类放在标题旁边，但在链接中包含链接似乎效果不佳。

谢谢。

Answer 1

这里是你需要的代码:) 使用 flexbox

使用方法：使用容器 div 作为标题和帮助标记，使用绝对位置设置到顶部并使用 flex 居中。

弹性盒指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.image {
  position:relative;
  width:200px;
  height:250px;
}

img {
  max-width:100%;
  max-height:100%;
}

.header {
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(255,255,255, .5);
  color:#000;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:30px;
}

span {
  margin:0 5px;
}

.help {
  width:15px;
  height:15px;
  background:red;
  /** or use margin 0 5px 0 auto to align right **/
}

<div class="image">
  <div class="header">
    <span>My info</span>
    <div class="help"></div>
  </div>
  <img src="http://maximumwallhd.com/wp-content/uploads/2015/07/fonds-ecran-paysage-de-reve-161-660x330.jpg">
</div>