CSS/HTML : 내용을 아래로 밀어 넣는 툴팁

Question

사용자 정의 CSS 툴팁이 표시되면 다른 내용을 푸시 다운합니다. ... 나는 그것을 잘 작동하게하기 위해 position: absolute를 추가 할 필요가 있음을 알고 있지만 어디서 알아낼 수 없습니다

HTML :

<p>Fluff</p> 
<p>Fluff</p> 
<p>Fluff</p> 
<p>Fluff</p> 
<p>Fluff</p> 

    <div class="outer"> 

    <a class="tippy" href=""> 
     ICON<img src="" class="icon"/> 
    </a> 

    <div class="tooltip"> 
     STUFF<br/> 
     STUFF<br/> 
     STUFF<br/> 
     STUFF<br/> 
     STUFF<br/> 
    </div> 

    </div><!-- Container --> 

<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p> 
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p> 
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p> 
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p> 

CSS :

.outer { 
    width: 350px; 
} 

.tippy { 
    text-decoration: none; 
} 

a.tippy:hover + div { 
    display:block; 
    float: right; 
} 

.tooltip { 
    margin-left: 5px; 
    margin-top: -15px; 
    padding: 10px; 
    width: 265px; 
    height: 110px; 
    background-color: #ccc; 
    position: relative; 
    border: 2px solid #333; 
    display: none; 
} 
.tooltip:after, .tooltip:before { 
    border: solid transparent; 
    content:' '; 
    height: 0; 
    right: 100%; 
    position: absolute; 
    width: 0; 
} 
.tooltip:after { 
    border-width: 11px; 
    border-right-color: #ccc; 
    top: 13px; 
} 
.tooltip:before { 
    border-width: 14px; 
    border-right-color: #333; 
    top: 10px; 
} 

Fiddle:

Answer 1

당신은 01,235,363에 position:relative을 변경해야 .tooltip CSS 블록에있는

이 변경으로 인해 툴팁의 위치를 ​​지정하려면 CSS를 수정해야합니다.

.outer { 
    width: 350px; 
    position:relative; 
} 
.tooltip { 
    left: 55px; 
    top: -15px; 
    padding: 10px; 
    width: 265px; 
    height: 110px; 
    background-color: #ccc; 
    position: absolute; 
    border: 2px solid #333; 
    display: none; 
} 

그리고 마지막으로 a jsFiddle 보여주는 : 당신이 position:relative을 가지고 .outer을 수정하는 경우

이 (변경된 블록 만 표시) .tooltip

left:55px; 
top:-15px; 

같은 결과 CSS를 설정하는 것만 큼 간단합니다 행동 중입니다.