CodeAve.com CodeAve.com - CSS - Miscellaneous
ASP
JavaScript
CSS
·Basics
·Page Display
·Text Display
·Script Writers
·Contents
·What's New?
HTML
Maps
Links
Mail List
Search
Sitemap

 

Absolute & Relative Positioning
Within CSS you can position where exactly items will appear in the browser. This is done by either one of two ways. An absolute position, whereas you are defining exactly where within the browser that the item should appear. A relative position, where an item is placed within the browser based on its relationship to another item already in the browser output. In this example, we place on image 100 pixels from the top and left of the browser window and a second image will be rendered 200 pixels from that initial image.
•View the Output
•Text View
•Print View
•Mail this Link
•Download the Code

<html>
<title>CodeAve.com/CSS - Absolute + Relative Position</title>
<body bgcolor="#FFFFFF">

<!-- Image placed 100 pixels from the 
top and left of the browser window -->
<img style="position: absolute; top: 100px; left: 100px;" 
src="images/codeave-logo.gif">

<!-- Image placed 200 pixels from the 
top and left of the previous element -->
<img style="position: relative; top: 200px; left: 200px;" 
src="images/codeave-logo.gif">

</body>
</html>

 

 

 


 ASP: What's New? | Articles | Script Writers | Database Display | Read/Write
Server Variables | Response Objects | Random Events | Miscellaneous
HTML: Forms | Hyperlinks | Headers | Tables | Hyperlinks | Headers | Text Display
JavaScript: Document Info | Forms | Images | Navigation | Script Writers
CSS: Basics | Page Display | Text Display | Script Writers | Miscellaneous
Links | Search Engine db |  Privacy Statement |  Advertising Rates |  Email

CodeAve.com is hosted by MyHosting.com
Donate Food Online with a Mouse Click at TheHungerSite.com
Donate Land Online with a Mouse Click at TheRainForestSite.com
© 1999 - 2010 CodeAve.com
All Rights Reserved