Text and Image Positioning, a Tutorial

Learn how to position text and images on a web page.

By positioning, I mean placing certain content onto the web page in the desired location.

Three other terms need to be clear. Otherwise, this positioning tutorial will be as confusing as others you've read.

• Normal flow — Where content is placed on the web page if not otherwise positioned.

  Text and images and videos and such flow onto the web page one after the other. That's normal flow.

  To position content otherwise is what you'll learn how to do in this tutorial.

  The term normal flow applies to the web page, not to the browser window. The browser window is only a rectangular area through which the content of the web page is viewed.

• Container tag — A container tag is any HTML tag that may contain content.

  A container tag can be a div tag or other HTML tag (like p, pre, h3, or span) that may contain content.

• Relative — This isn't an Einstein speed-of-light relative, but a positioning relative. When content is positioned, it is always relative to something else.

  To learn positioning, it is important to have a clear understanding of this concept.

  When something is positioned, it is a certain number of pixels from another location. The positioning is relative to that other location.

  Let's use an image as an example. The image could be positioned relative to any of the following:

  1. Relative to the browser window. The image is positioned a certain number of pixels down from the top of the browser window and in from the left of the browser window. In other words, relative to the top-left corner of the browser window.

     Because the image is positioned relative to the browser window, the image doesn't move even when the web page is scrolled. It's relative to the browser window, not the web page.

     (The image could also be positioned relative to any other corner of the browser window.)

  2. Relative to the normal flow of the web page content. The image is positioned relative to where it would be in the normal flow of the content on the web page. The position is relative to its own normal location.

     Because the image is positioned relative to the normal flow of the content, the image scrolls when the web page does.

  3. Relative to the web page itself. The image is positioned a certain number of pixels down and right of the top-left corner of the web page.

     When the web page is scrolled within the browser window, the positioned image also scrolls. It's position is relative to the web page (which is scrollable), not relative to the browser window.

     (The image could also be positioned relative to any other corner of the web page.)

  4. Relative to a div or other container tag within the web page. The image is positioned relative to a container tag. (We'll use div as the example container tag.)

     The position is relative to one of the corners of the div.

     Because the image is positioned relative to a div in the web page, the image scrolls when the web page scrolls.

     (The image could also be positioned relative to any other corner of the div.)

  Conceptually, "relative to" may be understood as "attached to." The image positioned relative to the top-left corner of the browser window may be understood as attached to a certain distance from the top-left corner of the browser window.

  Similarly, relative to the web page and relative to a div may be understood as attached a certain distance from the top-left corner of the web page or attached a certain distance from the top-left corner of a div.

How to Do the Positioning

Now that you have a clear understanding of the the terms, they can be used in the positioning instructions.

We'll continue to use an image as an example.

There are 4 CSS definitions to specify the direction and distance to relatively position the image (replace "__" with a number). Generally one or two are used, but they are optional.

1. top:__px;
2. left:__px;
3. right:__px;
4. bottom:__px;

All position distances can be represented with a negative number, which would position the image the indicated distance opposite the normal direction.

There are also 4 CSS position property definitions. One is used for positioning the image relative to the browser window and 3 are used for positioning the image relative to the web page and its content.

1. position:fixed;

   The CSS position property value fixed is used to position the image relative to the browser window.

   Example:

   <img style="position:fixed; top:50px; left:3px;" src="image.png">
   
   

   With the above code, the image will be fixed 50 pixels down from the top and 3 pixels in from the left of the browser window. If the page scrolls, the image will remain fixed in position.

   To position the image a corresponding distance from the bottom right corner of the browser window, use:

   <img style="position:fixed; bottom:50px; right:3px;" src="image.png">
   
   

2. position:static;

   The CSS position property value static is the default position of every container tag within a web page that doesn't otherwise have a position specified.

   It means the content is positioned according to the normal flow of the web page content.

   If no CSS position property is otherwise defined, the property's position is static.

3. position:relative;

   The CSS position property value relative is used to specify a position relative to the normal flow of the web page content.

   It is unfortunate the word "relative" is used as a CSS position value – because every position is relative, regardless of the position value.

   Understand when the position value is "relative," it means relative to the normal flow of the web page content. Other position values mean relative to something else.

   When no CSS definitions top, left, right, or bottom are specified, the image remains in its normal flow. When one or two are specified, the image is positioned in the indicated direction by the indicated amount.

   Example:

   <img style="position:relative; left:50px;" src="image.png">
   
   

   With the above code, the image will be positioned 50 pixels in from the left of its normal position.

4. position:absolute;

   The CSS position property value absolute is used to specify a position relative to the the web page, unless the image tag is within a container tag defined with a CSS position other than static.

   Let's clarify that. (We'll use a div as the example container tag.)

   • If the image with position:absolute; is not within a div containing a position property other than static, then the image's position will be relative to the the web page.

     Examples:

     <body>
     <img style="position:absolute; top:10px; right:10px;" src="image.png">
     </body>
     
     

     With the above code, the image is positioned relative to the web page 10 pixels down from the top and 10 pixels in from the right.

     <body>
     <div style="border:3px solid gold;">
     <img style="position:absolute; top:10px; right:10px;" src="image.png">
     </div>
     </body>
     
     

     With the above code, the image is positioned relative to the web page the same as the immediately previous example, 10 pixels down from the top and 10 pixels in from the right.

     Although the image tag is in a div, the div does not have a CSS position definition. Therefore, the image is positioned relative to the web page rather than relative to the div.

   • If the image with position:absolute; is within a div containing a position property other than static, then the image's position will be relative to the position of the div.

     Example:

     <body>
     <div style="position:relative; border:3px solid gold;">
     <img style="position:absolute; bottom:10px; right:10px;" src="image.png">
     </div>
     </body>
     
     

     In the above code, the image is within a div containing a CSS position definition. Therefore, the image is positioned relative to that div. The image's position is relative to the bottom-right corner of the div; 10 pixels up from the bottom and 10 pixels in from the right.

   • If the image with position:absolute; is within a div that doesn't contain a position property, but whose parent contains a position property other than static, then the image's position will be relative to the position of the parent div.

     A parent div is the div within which another div is located. When a div is inside another div, the inside div is the chile and the outside div is the parent.

     Example:

     <body>
     <div style="position:relative;">
     <div style="border:3px solid gold;">
     <img style="position:absolute; bottom:10px; left:10px;" src="image.png">
     </div>
     </div>
     </body>
     
     

     In the above code, the image is not within a div containing a CSS position definition. However, the div's parent does have a CSS position definition. Therefore, the image is positioned relative to the parent div 10 pixels up from the bottom and 10 pixels in from the left.

   The div with the CSS positioning definition and/or the div containing the image may also contain other content. And some of the other content may be positioned absolutely.

   Here is an example of two divs, one within another. The outside div has a CSS position definition and a gold border, the other a blue border. Both divs contain additional content. An "X" is positioned absolutely near each corner between the gold and the blue borders.

   An Example

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate nisl a elit interdum vel fermentum muspi dignissim. Sed in tellus diam.

   X

   X

   X

   X

   Here is the source code for the above example.

   <div style="position:relative; border:6px solid gold;">
   
   <p style="margin:5px 0 0 0; font-weight:bold; text-align:center;">
   An Example
   </p>
   
   <div style="border:3px solid #66f; margin:1px 25px 25px 25px; padding:15px;">
   
   <p style="margin:0;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Proin vulputate nisl a elit interdum vel fermentum muspi 
   dignissim. Sed in tellus diam.
   </p>
   
   <div style="position:absolute; top:7px; left:7px; font-size:20px; font-weight:bold;">X</div>
   <div style="position:absolute; top:7px; right:7px; font-size:20px; font-weight:bold;">X</div>
   <div style="position:absolute; bottom:7px; left:7px; font-size:20px; font-weight:bold;">X</div>
   <div style="position:absolute; bottom:7px; right:7px; font-size:20px; font-weight:bold;">X</div>
   
   </div>
   
   </div>
   
   

The basics of positioning content on a web page are here, in this article.

Although there is a lot to learn, doing the examples and making up a few of your own should get you to the point where you are comfortable with it.

Will Bontrager