How to Position Text and Images Exactly and Relatively

There are several ways CSS can be used to position text, images, and other content on a web page. The positioning can be exact or relative to something else.

In this article, "image" is used to indicate any content to be positioned. The article will also use the term "div" to mean any HTML container that can be positioned, which generally is a div tag but can also be p or other tag that can contain content.

Fixed Position On the Window: The image remains fixed in a position of the browser window even when the rest of the page scrolls.

Absolute Position On the Page: The image is placed in an absolute position on the page. When the page scrolls, the positioned image also scrolls.

Relative Position to Normal Position On the Page: The image is placed relative to where it would have been in the normal flow of the page.

Floating Left or Right of Content On the Page: The image floats on the left or the right of other content. The other content may wrap around the floated image.

Below is an explanation of each to help you determine which method is best for the positioning you need to do. Live examples and example source code are included.

Fixed Position

This method will position an image in the browser window exactly. The image is removed from the normal content flow of the web page.

Note that for IE7 and IE8, the web page needs a DOCTYPE tag to position the image.

Generally, the image hugs an edge of the window. But it can also be positioned anywhere within the window.

When page content scrolls, the image remains fixed in the window, unmoving.

The fixed image can be positioned relative to the edges of any corner of the window. The edges are top, left, right, and bottom. The corners are top and left, top and right, bottom and left, and bottom and right. Specifying a distance from the two edges of any corner, the image can be positioned exactly anywhere within the window.

Note the example on this page. The Willmaster.com logo is fixed to the bottom right of your browser window. The positioning is specified as 0 pixels from the bottom edge and 0 pixels from the right edge.

Here is the code for that example.

<img src="//www.willmaster.com/images/wmlogo_icon.gif" 
   style="position:fixed; right:0px; bottom:0px; width:50px; height:50px; border:none;"
   alt="fixed position Willmaster logo"
   title="Willmaster logo in fixed position" />

The fixed position image may bleed (a printer's term for printed portions to be trimmed off) by using a negative value when positioning it. For a web page, "bleed" means part of the image is beyond the edge of the window and cut off.

Absolute Position

This method will place an image on the web page in exact position relative to the top-left of the page or relative to another positioned div. The image is removed from the normal content flow of the web page.

Absolute positioning can be confusing. In some circumstances, the positioning is relative to the entire document. In other circumstances, the positioning is relative to a certain div.

This is the default: The image is positioned relative to the entire document.

To position it relative to a div, give the div a position CSS definition, such as position:fixed or position:relative (but not position:static, which is the default position). Then, put the absolutely positioned image inside that div.

That's what I did with this example using my photo as the image.

My photo above is inside a position:relative div. The image is positioned to extend beyond the left side of the div for 30 pixels.

Here is the code.

<div style="position:relative; height:60px;">
<img src="//www.willmaster.com/images/20000710w80h80.jpg"
   style="position:absolute; top:-10px; left:-30px; width:80px; height:80px; border:none;"
   alt="photo of Will Bontrager"
   title="Photo of Will Bontrager" />
</div>

To remove the confusion, just remember that if the image is inside a div with a position CSS definition other than position:static, the absolute position will be relative to that div. Otherwise, it will be relative to the entire document.

Relative Position

This method adjusts the position of an image in relation to where it would have been in the normal flow of the page. The image remains in the normal content flow of the web page, just it's position is shifted.

Here is an example, the Willmaster.com logo. It's normal position is at the left edge of the column, in the middle of this and the following paragraph.

The relative position moved the image 50 pixels in from the left and 10 pixels up. Notice that the space the image would have required is still reserved on the page.

Here is the source code for the relatively positioned image.

<img src="//www.willmaster.com/images/wmlogo_icon.gif" 
   style="position:relative; left:50px; top:-10px; width:50px; height:50px; border:none;"
   alt="fixed position Willmaster logo"
   title="Willmaster logo in fixed position" />

Floating Left or Right

This method puts the image at the left or right of other content. The content flows around the image. The image remains part of the normal flow of the web page.

On the left is an example. Notice how this and the other paragraphs above the source code box flow around the image.

Depending on the column width of this article, this paragraph may extend below the image.

Here is the source code for the above.

<img src="//www.willmaster.com/images/20000710w80h80.jpg"
   style="float:left; margin-right:10px; width:80px; height:80px; border:none;"
   alt="photo of Will Bontrager"
   title="Photo of Will Bontrager" />

When an image is floated left, and there is not enough content to fill the space on the right of the image, the effect of the float can be cleared with

<div style="clear:left;"></div>

Any content following the above code will be below the floated left image.

Similarly, if an image is floated right, the float can be cleared with

<div style="clear:right;"></div>

And, if both a floated left image and a floated right image need to be cleared, it can be done with

<div style="clear:both;"></div>

Overlapping Content

Fixed positioned and absolute positioned images are removed from the normal flow of web page content. Thus, the images may be positioned so they are stacked.

When stacked, the image with the source code that comes later on the page will be placed on top of those that come earlier.

Unless the browser is told otherwise.

To tell the browser to stack positioned images in a different order, use the CSS z-index property.

The higher the z-index definition, the higher the image will be on the stack. z-index definitions do not need to be sequential. Negative numbers may be used. Numbers do not need to be sequential.

 
On the left is an example. My photo is stacked on top of the Willmaster.com logo even though the logo is last in the source code.

Here is the code used in the example:

<div style="position:relative;">
<img src="//www.willmaster.com/images/20000710w80h80.jpg"
   style="position:absolute; top:15px; left:65px; z-index:10; width:80px; height:80px; border:none;"
   alt="photo of Will Bontrager"
   title="Photo of Will Bontrager" />
<img src="//www.willmaster.com/images/wmlogo_icon.gif" 
   style="position:absolute; top:-10px; left:40px; z-index:-1; width:50px; height:50px; border:none;"
   alt="fixed position Willmaster logo"
   title="Willmaster logo in fixed position" />
</div>

Many images may be stacked. Adjust the stacking order with the CSS z-index property.

Using Positioning

The information in this tutorial can be used to position text, images, and other content on a web page. The examples were of an image. A div tag can be used (instead of an img tag) to position other content.

The positioning can be exact or relative to something else. Use the positioning technique best suited to what you want to accomplish.

Will Bontrager