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属性即可查看更改。）

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

1 个答案: