CSS allows us to position elements with pinpoint precision. As we discuss positioning, picture the appearance of a web page.
Positioning is the process of placing an element. It uses several properties including the position property. Our primary interest will be in positioning images, but other elements can be positioned, such as div, p, h1 or table.
The position property sets the type of positioning you want to use. The values for the position property are:
static, relative and absolute.
The static value keeps an element right it would be in the normal flow of a page. This is the default, so there is no need to use it.
The relative value positions an element relative to its normal position on a page. This offsets the element. Relative positions must be used with the edge properties listed below.
The absolute value places an element at a specific place on a web page. The element will still scroll when the page scrolls. Even though the positioning is absolute, it is still relative to the edges of your page. Absolute positions must use either top or bottom and either left or right (see below).
position: relative
position: absolute
The edge (my term) properties place the edges of an element.
These properties are :
left, right, top and bottom.
The values for these properties may be positive or negative. You may use any of the length units we know about (em, cm, etc.) in your CSS declarations, but the unit we are most familiar with is px (pixels).
Positive values for left move the left edge to the the right. Negative values for left move the left edge to the left.
Positive values for right move the right edge to the left. Negative values for right move the right edge to the right.
Positive values for top move the top edge down. Negative values for top move the top edge up.
Positive values for bottom move the bottom edge up. Negative values for bottom move the bottom edge down.
In other words, positive values move the edges toward the "inside" of a page. Negative values move the edges toward the "outside" of a page.
Another way to think of this is to ask "how much space do I want between the edge of this element and the corresponding edge of the page?".
Finally, you may think of the edge properties as coordinates for placing an element just like you do when you use a graphics tool, such as ImageMagick.
The left property is an x-coordinate, corresponding to width from the left edge of the page.
The top property is a y-coordinate, corresponding to height from the top of the page.
Style rules for positioning should be placed in a stylesheet. To position the same element on more than one page, make a CSS rule for that element in an external stylesheet. This works well for a background image. You may use either a class or an id in this case.
To position an element on just one page, your CSS should be in an internal stylesheet using an id.
This CSS class would position a paragraph 40 pixels to the right of it's normal position on a page:
<style type="text/css">
<!--
/* right paragraph */
p.right {
position: relative;
left: 40px;
}
-->
</style>
<p>
This paragraph does not use positioning.
</p>
<p style="position: relative; left 40px;">
The left edge of this paragraph is positioned 40 pixels to the right.
</p>
This paragraph does not use positioning.
The left edge of this paragraph is positioned 40 pixels to the right.
This CSS would position an h1 100 pixels from the top of a page and 120 pixels from the left edge of the page:
h1 {
position: absolute;
top: 100px;
left: 120px;
}
You want the top left corner of an image at x,y coordinates 100,120.
CSS in Stylesheet
/* image 1 position */
#one {
position: absolute;
left: 100px;
top: 120px;
}
<img id="one" src="mallrat.jpg" />
<div id="one">
<img src="mallrat.jpg" />
</div>
The "div wrapper" method works best for WebTV.
Position an image on a page anywhere except the top left corner. Post your page.
Happy coding!
Gnubee
