在图像顶部覆盖弹出窗口

我正在尝试创建一个图片链接，其中包含用户可以点击以显示带指令的弹出窗口的问号字形。在图像顶部覆盖弹出窗口

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

我的代码如下所示：

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类，但在链接中有链接似乎不起作用。

谢谢。

来源

2017-07-19 Dave

会右上角会满意吗？你可以[绝对定位]（https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Absolute_positioning），相对于'a.picture'。 – showdev

在这里，你需要的代码:)使用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>

来源

2017-07-19 21:16:50 EyWN

在图像顶部覆盖弹出窗口

回答

相关问题