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.
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
STEP ONE:
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:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Relative Positioning</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<!-- end .header --></div>
<div class="container">
<div class="content">
<!-- end .content --></div>
<!-- end .container --></div>
<div class="footer">
<!-- end .footer --></div>
</body>
</html>
STEP TWO:
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.
<div class="content">
<div id="CheckMark">
<img src="images/CheckMark.gif" width="39" height="36" alt="Check Mark" />
<!-- end #CheckMark --></div>
<!-- end .content --></div>
STEP THREE:
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.
STEP FOUR:
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.
STEP FIVE:
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.
I just signed up at Server Intellect and couldn’t be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.