뷰 포트 안의 절대 요소를 가로로 유지하십시오.

클릭 할 때 나타나는 절대 위치 지정된 툴팁 요소가 있습니다. 그러나 특정 조건에서이 요소는 너무 오른쪽으로 이동하여 페이지에 가로 스크롤을 추가 할 수 있습니다. 내 생각은 항상보기 포트 안에 수평으로 유지하는 것입니다.뷰 포트 안의 절대 요소를 가로로 유지하십시오.

Windows를 사용하고 화면의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하면 메뉴가 튀어 나오는 것과 비슷합니다. 일반적으로 마우스 커서의 오른쪽 하단에 표시되지만,이 동작이 화면의 오른쪽 하단에서 수행되면 메뉴가 커서의 왼쪽 상단에 나타납니다. 여기

가 JSFiddle 예입니다 : http://jsfiddle.net/cEqz6/1/

HTML

<div class="view-port"> 
    <div class="div-holder"> 
     <div class="absolute-div"> 
     </div> 
    </div> 
</div>

CSS

body { 
    padding: 0; 
    margin: 0; 
} 
.view-port { 
    width: 1000px; 
    height: 600px; 
    background: #f5f5f5; 
    overflow: auto; 
} 
.div-holder { 
    position: relative; 
    padding: 10px; 
    background: #dadada; 
    width: 300px; 
    min-height: 50px; 
    left: 500px 
} 
.absolute-div { 
    position: absolute; 
    background: #333; 
    width: 600px; 
    padding: 10px; 
}

.absolute-DIV 항상

출처

2014-05-11 Georgi Demirev

자바 스크립트를 사용하여 툴팁을 표시합니까? Javascript를 사용하여 게재 순위를 계산합니까? 그렇다면 적절한 교정을하여 그 상태를 피하지 않는 이유는 무엇입니까? 툴팁이 하드 코드 된 위치에 'right : 0'을 사용하면 절대 위치 요소가 도움이 될 수 있습니다 (오른쪽에 충분한 공간이있는 스크린에서는 IMO가 도움이되지 않습니다). –

이것은 실제로 도움이됩니다. 내 툴팁이 게시물의 오른쪽 하단 모서리에 팝업으로 표시되기 때문에 right : 0로 배치하고 게시물 너비와 동일한 최대 너비를 추가합니다 (그래서 왼쪽으로 지나치지 않습니다). 감사! –

일반적으로 포트 .view 내부해야합니다, 당신 툴팁이 나타날 위치 (일반적으로 마우스 위치). 거기에서 도구 설명 너비를 추가하고 뷰포트의 오른쪽에서 떨어지는 지 확인할 수 있습니다.

그런 경우 CSS를 적용 할 수 있습니다. "툴팁 오른쪽"클래스를 추가하면 대상 위치의 반대쪽에 툴팁이 나타납니다.

툴팁이 너무 멀리 떨어져서 뷰포트 아래쪽으로 떨어지면 비슷한 원리를 적용 할 수 있습니다.

출처

2014-05-11 12:28:23

그게 정말 좋은 생각이고 일할 수도 있었는데, @ try-catch-finally는 나에게 멋진 대안을 주었고, 내 코드는 이미 자바 스크립트로 채워져 있기 때문에이 수정을 위해 JS를 사용하지 않는 것이 조금 완화되었다. 어쨌든 고마워! –

뷰 포트 안의 절대 요소를 가로로 유지하십시오.

답변

관련 문제