버튼 아래의 모달 윈도우 부동

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; 
}