css - 绝对不考虑父元素的边框来定位元素

Question

默认情况下，如果您尝试将元素绝对定位在父容器的左上角，它将根据边框宽度进行操作(请参阅 fiddle :http://jsfiddle.net/t52Pp/1/):

<div>
    <i>element</i>
</div>

div {
    position: relative;
    border: 20px solid red;
    height: 14px;
}
div > i {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
}

无论边框宽度如何，如何执行相同的操作而不必指示负值(例如 http://jsfiddle.net/u75s7/1/ ):

div > i {
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 14px;
}

Answer 1

你最好的选择可能是在有边框的 div 周围添加另一个 div。然后给它一个相对位置的样式，然后从有边框的 div 中删除位置样式。

这应该可以解决您的问题。