如何定义绝对定位元素的锚点？答案

【问题标题】：How to define absolute positioned element's anchor point?如何定义绝对定位元素的锚点？
【发布时间】：2013-09-04 17:16:13
【问题描述】：

是否可以在没有 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;
}

在这个例子中，块的宽度是固定的，但在我的代码中它是可变的。可能需要不同的解决方案。

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

谢谢！

【问题讨论】：

要锚定右上角，只需使用right: 150px 而不是left: -20px - 这会将您的元素定位在右边缘左侧 150 像素处。
您可以使用 'em' 而不是 'px'：这将基于字体高度。

标签： html css

【解决方案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 属性即可看到它的变化。）

【讨论】：