절대 위치 요소의 앵커 포인트를 정의하는 방법은 무엇입니까?

Question

CSS 변환없이 배치 된 요소의 앵커 포인트를 정의 할 수 있습니까?

변수 중심의 div 앞에 화살표를 배치하고 싶지만 오프셋 (왼쪽 : -20px;)을 정의해야합니다.

글꼴 크기를 늘리려면 화살표와 블록 사이의 간격이 더 이상 비례하지 않습니다.

어떻게 내 절대 위치 요소의 앵커를 왼쪽 위가 아닌 오른쪽 위 모서리로 정의 할 수 있습니까?

HTML :

<div id="block"> 
    back 
    <div id="arrow">&larr;</div> 
</div> 

CSS :

#block { 
    height: 20px; 
    width : 40px; 
    margin: 0 auto; 
    border: 1px solid black; 
    position: relative; 
} 

#arrow { 
    position: absolute; 
    left: -20px; 
    top : 0; 
} 

블록이 고정 폭이다이 예에서

,하지만 내 코드에서이 변수입니다. adiffrent 솔루션이 필요할 수도 있습니다.

http://jsfiddle.net/J7XnB/1/

감사합니다!

Answer 1

넌 측정 단위가 아닌 절대 화소 등이 사용 em 얻을 수

#block { 
    font-size: 16px; 
    height: 1em; 
    width: 2.5em; 
    margin: 0 auto; 
    border: 1px solid black; 
    position: relative; 
} 

#arrow { 
    position: absolute; 
    left: -1em; 
    top: 0; 
} 

또한 추가적인 장점을 갖는다 #block의 높이 및 폭을 측정 em를 사용하여 폰트 크기이면 그 변경되면 상자가 텍스트에 맞게 크기가 조정됩니다. http://jsfiddle.net/J7XnB/2/이

(그냥 변경 볼 수있는 font-size 속성을 변경하십시오.)