회전 된 앵커를 오른쪽에 배치하려면 어떻게해야합니까?

내가하려고하는 것은 슬라이드 아웃 패널 jQuery를 배치하여 내 웹 사이트에서 선택한 레서피에 대한 부수적 인 정보를 표시하는 것입니다.회전 된 앵커를 오른쪽에 배치하려면 어떻게해야합니까?

나는 슬라이드 아웃 패널의 시작점으로 this example을 사용했습니다. 그러나 슬라이딩 패널을 트리거하는 앵커는 원하는 것보다 더 많은 화면 영역을 차지하므로 페이지를 90도 회전하고 페이지의 오른쪽에 배치하려고합니다. 회전을하는 방법에 대한 예제는 this site을 보았습니다.

a.trigger{ 
    position: absolute; 
    text-decoration: none; 
    top: 100px; 
    right: 0; 
    font-size: 16px; 
    letter-spacing:-1px; 
    font-family: verdana, helvetica, arial, sans-serif; 
    color:#fff; 
    padding: 20px 40px 20px 15px; 
    font-weight: 700; 
    background:#333333; 
    border:1px solid #444444; 
    -moz-border-radius-topright: 20px; 
    -webkit-border-top-right-radius: 20px; 
    -moz-border-radius-bottomright: 20px; 
    -webkit-border-bottom-right-radius: 20px; 
    -moz-border-radius-bottomleft: 0px; 
    -webkit-border-bottom-left-radius: 0px; 
    display: block; 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
}

을 그리고 어떤 결과 것은 이것이다 : 다음과 같습니다

<a class="trigger" href="#">Nutrition</a>

일부 CSS : 기본적으로 내가 끝낼 것을이 같은 것입니다 그래서

enter image description here

, 그 right:0 재즈는 CSS를 수정하지 않는 것. 그것은 맞지 않습니다. 원점 인 직사각형의 왼쪽 하단 모서리와 함께 회전되는 것처럼 원래의 폭만큼 오프셋 된 것처럼 보입니다. (이것은 IE에있는 방식으로 일반적으로 우리가 사내에서 사용하는 것입니다.)

나는 오프셋 인수 나 원점을 지정하는 방법을 보지 못했습니다. 방금 검색하는 방법을 설명하는 페이지를 놓친 것일 수 있습니다. 그렇다면 링크를 클릭하는 것이 좋을 것입니다. 해결 방법에 대한 아이디어가 있으면 감사하겠습니다. 그것을하기위한 방법을 듣거나 내가하고 싶은 것을 성취하기위한 다른 방법을 들으십시오.

출처

2011-09-24 itsmatt

'right : -somevalue'에 음수 값을 부여하는 방법 – Ehtesham

덧씌우 기 오른쪽이 문제를 해결하는 데 도움이되지만 다른 것도 당신을 위해 노력하고 있습니다. @Ehtesham이 언급했듯이, IE9에서는'-68px'를 사용하거나'-8px'를 사용하면''오른쪽 '을 할 수 있습니다. 그러나 패딩 오른쪽을 제거하면 상자로 원숭이가됩니다. http://jsfiddle.net/equHa/ 스타일이 파이어 폭스로 잘 해석되지 않는 것 같아서 끔찍한 것 같습니다. –

절대 위치 요소는 상위 컨테이너에만 상대적으로 작동하므로 앵커가있는 주 컨테이너에 position:relative; 특성이 추가되어 있는지 확인하십시오.

출처

2011-09-24 02:32:59

회전 된 앵커를 오른쪽에 배치하려면 어떻게해야합니까?

답변

관련 문제