All You Want to Know About CSS Static Positioning
CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, Relative, and Static. In this tutorial we are going to learn all about Static Positioning. All the elements by default are Static Positioned. When an element is static, it ignores any placement declarations. By default, Static Positioning place elements relative to the sides of the page.
The other three types of positioning will be explained on other tutorials.
NOTE: This tutorial was completed using XHTML 1.0 Transitional with CSS. It is assumed you have basic knowledge of HTML and CSS principles.
I created a XHTML document with different <div>s tags: One for the header, one for a container that includes a <div> for the content, and one for the footer.
Let’s have a look at the initial HTML setup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- end .header --></div>
<!-- end .content --></div>
<!-- end .container --></div>
<!-- end .footer --></div>
Also, I added a Cascading Styling Sheet to it. Download the source files to obtain the entire code for this tutorial.
Let’s add an image into our content <div>. Wait! We don’t want our image to be part of the content. Easy! Let’s create a <div> for it.
<img src="images/CheckMark.gif" width="39" height="36" alt="Check Mark" />
<!-- end #CheckMark --></div>
<!-- end .content --></div>
Why a <div>? A <div > outlines a separation in an HTML page. It also makes the process of styling elements with CSS easier.
Notice that our image was directly positioned at the left side of our page (traditional layout).
We don’t need a CSS rule to specify Static Positioning. If we add top, bottom, left, right declarations, they will be ignored.
Debug in your favorite browser the HTML page. You’ll see your image is right where we put it. If we don’t change its position to Absolute, Fixed, or Relative, the element is not going to move. Therefore, it will be always positioned according to the layout of the page.
To conclude, let’s learn some facts about Static Positioning:
- There is no need to declare Static Positioning.
- Static Positioning is the default behavior for any element.
- Unless you apply an Absolute, Fixed, or Relative declaration, elements will appear in the order they occur in the HTML markup.
- It avoids top, bottom, left, right placement declarations.
That’s all! You learned how Static Positioning is initially declared.