Position Relative to a Word's Location

Learn how to position an image or text on a web page relative to the location of a word. When the word moves around because of different screen widths, the attached image or text also moves.

Recently, I was building a form and needed to place the ↔ arrow above the word "horizontal" — without moving "horizontal" to accommodate the arrow. In other words, the arrow should just kinda float with "horizontal".

In this line, the arrow is above the word horizontal ↔ and will move with the word if the line wraps.

Here is how the above word "horizontal" and "↔" are coded.

<span style="display:inline-block; position:relative;">horizontal
<span style="position:absolute; top:-.65em; left:1em;">&harr;</span>
</span> 

(The HTML code ↔ prints the ↔ character.) The format is a span tag around the word that will have an image or text attached (bolded span tags in the above code). Then, ahead of the closing </span> tag, insert another span tag with the image or text to attach (italicized span tags in the above code).

The CSS styles in the word's span tag is display:inline-block; position:relative; and both of those are required.

The display:inline-block; tells the browser to treat the span tag as if it was an inline div, which lets us position other content absolutely. And position:relative; tells the browser to use the span as the anchor when content is absolutely positioned.

Both of those CSS styles are required for the span that contains the word. Additional styling may be added.

The CSS styles for the attached image/text in the span style example is position:absolute; top:-.65em; left:1em;

The position:absolute; CSS is required. It tells the browser to position the contents of the span absolutely.

Specific placement within the span of the word is optional. If not provided, the browser will provide default placement. In the span example, top:-.65em; left:1em; are used. In addition to top and left, there are two other placement CSS properties, right and bottom. The value of the properties tell the browser the location from the specified edge.

Positioning an image or text relative to a word can be easy to do, so long as a person knows how. Which you now do.

(This content first appeared in Possibilities newsletter.)

Will Bontrager