Positioning

Placing the various <div> tags around the screen can be tricky. Rather than manipulating the padding and margins of each <div>, until they are where you want them, you can use the "position" property within the CSS of a particular <div> element. There are a few ways to do this:

Begin by assigning an id to the <div> like this, in your HTML:

Then the fun begins. In your associated CSS file, you need to define what the "id" called "NumberOne" is. This will differentiate it from the rest of the <div> tags. Ids are always started with a #, followed by the name. After that, type the curly braces to begin the definition of your id.

When defining the position property within the <div> element there are four different types of position properties. They are Static, Fixed, Absolute and Relative.

1. Static position is the default setting for all HTML elements. It tells the browser to position the <div> tag exactly where it falls in the flow of the code. Because of this, you can not relocate a static element. Because it is the default you only need to define the position as static if you've previously defined all divs as something else.


div {
   position: absolute;
}
#NumberOne {
   position: static;
}

This shows that the <div> tag with the id "NumberOne" will have a static position, but all other <div> tags will be absolute.

2. Fixed position is removed from the flow of the code and no matter how hard you scroll, it will always stay in exactly the same place. This is how developers can make a menu float on top of the scrolling body of a page. Because it is not part of the normal flow of code you have to define its locations with other properties, like top, bottom, right, left. These tell the <div> how far from that particular edge of the browser window it will be. There's are two on this page, can you find them?


#NumberTwo {
   position: fixed;
   top: 100px;
   left: 250px;
}

This example shows a <div> element that will be placed 100 pixels from the top of the browser window and 250 pixels from the left side of the browser window.

3. Absolute position is located relative to its first parent (or the enclosing tag), as long as the parent isn't Static. If you want to place an Absolute <div> inside of a Fixed <div> you define the Absolute <div> relative to the Fixed <div>'s edges. So, it works in a similar fashion to the Fixed property, but instead of it being relative to the browser window, its relative to its parent element.


#NumberThree {
   position: absolute;
   top: 100px;
   left: 250px;
}

So, if <div id="NumberThree">was nested inside of <div id="NumberTwo"> it would be positioned 200 pixels from the top and 500 pixels from the left of the browser window.

4. Relative position is located relative to where it should fall in the normal flow of the code. You define its location in a similar way to Absolute and Fixed, but the starting point is wherever the element should have been. There is one caveat: the element with relative position must be contained inside of another element that does NOT have Static Position.


#NumberFour {
   position: relative;
   top: 100px;
   left: 250px;
   width: 100px;
   height: 100px;
   background-color: #3F4E59;
}

In this case, you have to see the HTML to know where the <div> will show up.

To show this I've included a relative <div> above. The box is 100 pixels from the top and 250 pixels from the left of where it's supposed to be, on the line below "...the <div> will show up."