Typically, when attempting to position an element absolutely in the top left corner of a parent container, it will be done relative to the border width. You can refer to this example in the fiddle link provided: 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;
}
Is there a way to achieve the same positioning without considering the border width and avoiding negative values? (See alternative fiddle here: http://jsfiddle.net/u75s7/1/):
div > i {
position: absolute;
top: -20px;
left: -20px;
font-size: 14px;
}