change position
Before we get into the use of the style.postion statement, you must understand how the two options of this statement differ. You would usually use them with ilayer tags to accomplish a drop down menu. Each has its pros and cons and each has a very particular way they must be used.
The first option is absolute. The absolute positioned document element is positioned according to a position the browser calculates in relation to the top left corner of the document. It is expressed in pixels. The element assigned to this positioning schema will stay in the position given even if the rest of the document resizes or shifts as the browser window is resized. For example, if you absolutely positioned a centered table in your document and the user resized the window, that portion of the table that is absolutely referenced will stay where it is – the rest of the document will move. If you’d like to use this positioning technique, you must, for practical reasons, position your page justified left, valign=top. This is because the document is positioned absolutely according the top left corner of the document. If the browser window is resized, the page doesn’t move and the absolutely positioned element will have the same referenced location in the document.
The relatively positioned page element is by far the most useful. It is usually applied as a position in a table. The position is referenced as a point positioned absolutely, but in reference to the upper left corner of the area of the document specified by the TD tag. If the page is resized, the TD tag will move, but the content attached to the upper left corner of that tag will adjust as the TD tag adjusts, keeping the structure of the table intact. A browser resize, then, will move the entire table including the relatively positioned portion given as content within the table.
<html>
<head>
<script type="text/javascript">
function moveleft() {
document.getElementById('header').style.position="absolute";
document.getElementById('header').style.left="0";
}
function moveback() {
document.getElementById('header').style.position="relative";
}
</script>
</head>
<body>
<h1 id="header" onmouseover="moveleft()" onmouseout="moveback()">Mouse over this text</h1>
</body>
</html>
Notice that the style.left attribute was stated as the second statement within the JavaScript function. This is the value, in pixels, that the browser will use to position the content. Notice also that you don’t have to use the style.left attribute if you’re positioning relatively.
|
