툴팁을 올바른 위치에 배치하는 '상대적'위치 지정은 어떻게됩니까?

Question

Here's CSS 툴팁의 예입니다. 저자는 툴팁을 상대적으로 배치합니다. 그러나

.tooltip{ 
    display: inline; 
    position: relative; 
} 

의 tutorial 말한다

상대. 이 위치 유형은 아마도 가장 혼란스럽고 오용됩니다. 그것이 정말로 의미하는 것은 "그 자체와의 관계"입니다. 위치를 설정하면 : relative; 요소 위에 다른 위치 지정 속성 인 (위, 왼쪽, 아래 또는 오른쪽)이 없으면 의 위치에 아무런 영향을 미치지 않습니다. 위치를 그대로두면 그대로 나타납니다. static; 하지만 다른 위치 지정 속성을 부여하면 top : 10px; 위치가 10 픽셀 아래로 이동합니다. 여기에서 은 정상적으로됩니다. 당신이 상상할 수있는 확실한 점은, 엘레멘트를 규칙적인 위치를 기반으로 이동시키는 것은 매우 유용하다는 것입니다. 나는 자신이 양식 요소를 여러 번 나열하기 위해이 방법을 사용하고 있는데, 나는 그들이 원하는 방식대로 줄을 쓰고 싶지 않다는 경향이있다.

위치를 설정할 때 다른 일이 두 개 있습니다. 알고 있어야하는 요소에 있습니다. 하나는 요소에 z- 인덱스를 사용할 수있는 기능을 도입했기 때문에 정적으로 배치 된 요소 인 에서는 실제로 작동하지 않습니다. Z- 색인 값을 설정하지 않더라도 이 요소는 정적으로 배치 된 요소 위에 나타납니다. 정적으로 배치 된 요소 인 에 더 높은 Z- 색인 값을 설정하여이를 해결할 수는 없습니다. 또 다른 일은 이 절대적으로 위치한 자식 요소의 범위를 제한한다는 것입니다. 상대적으로 배치 된 요소의 자식 인 모든 요소 은 해당 블록 내에 절대적으로 일 수 있습니다. 여기에 대해 제가 이야기하는 몇 가지 강력한 기회가 있습니다 ( ). 내가 이해

은 수정없이 같은 top, left 등 relative가 static에 해당하고 페이지의 흐름과 함께 이동한다는 것입니다. 그런 다음 툴팁이 올바른 위치, 즉 하이퍼 링크 위의 위치에 어떻게 표시됩니까? 대신 페이지의 끝에 표시해야합니까?

Answer 1

툴팁에 입력하신 CSS가 완전하지 않습니다. 나는 너를 w3schools에서 본 것 같아. 그러나 그것에는 두 개의 요소가 있습니다 : .tooltip 클래스를 가진 부모 요소와 그 안에 자식 요소 (실제 툴팁 텍스트)는 .tooltiptext 클래스입니다.

부모 요소는 top, left ... 위치가없는 position: relative을 가지고 있습니다. 원래 위치 (정상)에서 정적 요소로 말한대로 작동합니다. 하지만 그 안에있는 자식 툴팁 텍스트에는 position: absolute이 있는데, 이것이 일반적인 텍스트 흐름과 분리되어있는 이유입니다.

.tooltip { 
 
    /* this is just to add meaning for position:absolute of .tooltiptext */ 
 
    position: relative; 
 
    
 
    color: navy; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    /* Position the tooltip */ 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 100%; 
 
    left: 10%; 
 
    
 
    /* style the tooltip */ 
 
    min-width: 50px; 
 
    background-color: #ff9; 
 
    color: black; 
 
    font-size: 10pt; 
 
    border-radius: 3px; 
 
    padding: 3px 10px 6px; 
 
    white-space: nowrap; 
 
    
 
    visibility: hidden; 
 
} 
 

 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
}

<span>Sample: </span> 
 

 
<span class="tooltip">Hover over me 
 
    <span class="tooltiptext">Tooltip text</span> 
 
</span>

: 여기

샘플이고