3
CSS3가 페이드 인 된 CSS 툴팁이 있습니다. Z- 인덱스는 999로 설정되어 있습니다. 링크 위로 마우스를 가져 가면 도구 설명 자체가 내 다른 콘텐츠를 푸시합니다. 스팬을 사용하여 블록으로 변환했습니다.내 CSS 툴팁이 내 다른 콘텐츠를 푸시하는 이유는 무엇입니까?
Here은 내가하는 일의 한 예입니다. 콘텐츠를 푸시하는 것을 어떻게 막을 수 있습니까?
감사합니다.
A
답변
3
Display:block은 페이지 흐름에서 요소를 가져 오지 않으며 단순히 새로운 자체 행으로 푸시합니다. 다른 포스터에서 권장하는대로 position:absolute을 사용하면 효과가 있습니다. Position:absolute은 position:relative이 설정된 부모가없는 경우 (예 : top:0px; left:20px;) 브라우저 창 전체에 위치를 설정합니다 (그러면 기준점이됩니다). 이 두 번째 유형의 예제는 해당 div가 페이지에 배치되는 위치와 관계없이 지정된 콘텐츠 div 내 오른쪽에서 정확하게 30px 크기의 링크를 배치하는 것입니다.
은 원래의 페이지 흐름에서 요소의 원래 위치를 기준으로 요소를 배치하는 데 사용할 수 있으며 요소가 있었던 공간을 남겨 둡니다. Position:fixed은 페이지가 스크롤 될 때 움직이지 않아야하는 요소 (예 : 고정 탐색 바, 페이지 브랜딩 또는 바닥 글)에 사용할 수 있습니다. Position:static이 기본 위치 설정이므로 다른 위치 유형을 재정의해야 할 때 사용해야합니다.
다른 요소 내에서 툴팁 텍스트의 범위를 사용하는 경우 상위 요소를 position:relative으로 설정하고 내부 범위를 position:absolute으로 설정하는 것이 좋습니다. 툴팁 텍스트가 정확히 떨어지는 곳 (즉, 부모 요소 위 또는 아래, 왼쪽 또는 오른쪽)을 조정하려면 상단 및 좌측 값을 설정해야합니다.
도움이되기를 바랍니다.
4
1
툴팁 CSS 위치가 절대 값인지 확인 했습니까? (적어도 정적이 아님).
매우 유용하고 유익한 답변, 고맙습니다. – Kyle