在一個按鈕下浮動模態窗口

Question

我需要顯示一個註釋模態窗口。但是由於它的流體佈局，位置在更大的屏幕上變化。 如何將模態窗口定位在圖像鏈接之下。我想要它在確切的位置。我如何去做呢？

Answer 1

This should work as a base for you.

HTML

<div class="notificaton-bar"> 
    <div class="notice">Notification 
     <div> 
      Here is the applicable note. 
     </div>  
    </div> 
</div> 

CSS

.notificaton-bar { 
    background-color: #999999; 
    padding: 0 10px; 
} 

.notice { 
    position: relative; 
    display: inline-block; 
    background-color: inherit; 
    font-size: 1.5em; 
    min-width: 140px; 
    padding: 10px 5px; 
    text-align: center; 
} 

.notice div { 
    display: none; 
    width: 130px; 
    padding: 10px; 
    font-size: .75em; 
    text-align: left; 
    background-color: inherit; 
    border-radius: 10px; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -75px; 
    margin-top: 10px;  
} 

.notice div:before { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 11px solid #999999; 
    position: absolute; 
    top: -10px; 
    left: 50%; 
    margin-left: -10px; 
} 

.notice:hover div { 
    display: block; 
}