在图像上叠加弹出窗口

Question

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

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

我的代码如下所示：

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> 

为了让popover字形位于标题旁边，我在css中需要做些什么？我尝试将glyphicon类放在标题旁边，但在链接中有一个链接似乎没有用。

感谢。

Answer 1

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

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

  

Flexbox指南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>