Как определить опорную точку абсолютного позиционного элемента?

Question

Возможно ли определить опорную точку позиционированного элемента без преобразований CSS?

Я хочу поместить стрелку перед переменным центрированным div, но мне нужно определить смещение (left: -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; 
} 

В этом примере блок фиксированной ширины, но в моем коде переменная. Может потребоваться дополнительное решение.

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; 
} 

Использование em измерить высоту и ширину #block также имеет дополнительное преимущество, что если размер шрифта изменен, тогда размер окна изменится в соответствии с текстом.

Вы можете увидеть здесь работать: http://jsfiddle.net/J7XnB/2/

(Просто измените font-size свойство, чтобы увидеть это изменить.)