Displaying element to the left leaves a blank

Please see http://jsfiddle.net/jGCx9/

I have right: 28px which causes the span element to shift left, but this does not leave space for the following elements (here, some text).

H开发者_运维百科ow can I prevent this blank from being created?

Use position: absolute; instead, and position it relative to the upper-left corner of its containing element. That way, it will be totally taken out of the normal render-flow, and it will not affect other elements. http://jsfiddle.net/jGCx9/1/

span {
    position: absolute;
    left: 108px;
    top: 1px;
}

This is the expected behavior, because position: relative; just allows you to move the specified element without any impact on other elements. Try a negative value for margin-left on your span, even if that is kind of a dirty trick it may work.

span {
    display: inline-block;
    margin-left: -38px;
    position: relative;
    top: 1px;
}