CSS positioning properties allow you to determine where on your page certain elements will appear. Elements can be positioned using the top, right, bottom and left properties, however to set these properties the elements position property needs to be set first. Let’s dive in and see what position properties are available to us.
PART ONE:
Static Positioning
Static positioning is the default positioning for all elements. A statically positioned element is always positioned according to the normal flow of the document. Even if you never declare the position of an element, it’s static. That’s truly all there is to know about static positioning.
PART TWO:
Fixed Positioning
An element with fixed positioning is positioned relative to the browser window. An element with fixed positioning will not move even if the window is scrolled. Let’s have a look at an example. The HTML page will contain 3 div elements, each with a class that will correspond to the type of positioning we will apply. In our CSS file, we’ll specify that the element needs to have fixed positioning. First, here’s what the HTML file looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Fixed Positioning</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="fixed"> </div> </body>
Next, to make our fixed div more visible, we’ll add a bit of CSS. Let’s add some height and width, a background color, and the fixed positioning to our element. Here’s what the CSS looks like:
.fixed {
background-color: #06C;
height: 200px;
width: 200px;
position: fixed;
}
Now, when we view this div in the browser, no matter how hard we try and scroll away from it, it will remain positioned in the top left corner. This is the default location, but we could use top, right, bottom, and left properties to move the element wherever we’d like to. Fixed positioning is used often for top menu bars or ads that need to remain in view no matter where a user is on a page.
PART THREE:
Relative Positioning
Relative positioning refers to positioning an element relative to its normal flow in the document. This is a good way to position elements; however you have to be aware that the space the element was occupying generally is still there as space. So, let’s say you had an element that was causing your page to have a scrollbar because it’s too far down in the window. If you position it relatively and move it up, you’ll still see the scrollbar as if the element was still there. However, it does come in handy when elements need a small shove in the right direction. Here’s how you use relative positioning:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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="relative"> </div> </body> </html>
body {
border: thin dashed #999;
margin: 100px;
}
.relative {
background-color: #06C;
height: 200px;
width: 200px;
position: relative;
}
PART FOUR:
Absolute Positioning
Absolute positioning takes an element out of the normal flow, and puts it into the position you specify. It will always (absolutely) be the specified distance away from the side that you declare. So for instance, right: 200px would always ensure that an element was 200 pixels away from the right side of the browser window if its position was defined as absolute. Try changing the previous example to absolute and see what happens!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Absolute Positioning</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="absolute"> </div> </body> </html>
body {
border: thin dashed #999;
margin: 100px;
}
.absolute {
background-color: #06C;
height: 200px;
width: 200px;
position: absolute;
}
Positioning is a fundamental part of CSS, and learning to use these positions properly will greatly enhance your ability to create page layouts. Join us in our next tutorial when we’ll talk about ID’s versus classes and how to use them properly. Until next time!
The post Fundamentals of CSS Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.