在圖像頂部覆蓋彈出窗口

我正在嘗試創建一個圖片鏈接，其中包含用戶可以點擊以顯示帶指令的彈出窗口的問號字形。在圖像頂部覆蓋彈出窗口

現在，問號字形出現在底部，但理想情況下，我希望它恰好位於鏈接「我的信息」標題旁邊。

我的代碼如下所示：

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

在圖像頂部覆蓋彈出窗口

回答

相關問題