| Sample Code for Positioning with CSS | | | | page. |
| | | | As with the relative positions example, you should |
| See More About:blogging, blogger,blogspot,make | | | | always place your elements in the flow to see where |
| money from blog | | | | they land in the normal flow of the page. |
| * css positioning | | | | <p>If you put an image between text blocks |
| * advanced css | | | | on a page |
| * html and web design examplesblogging, | | | | <img src="/library/graphics/cecb2.gif" width=32 |
| blogger,blogspot,make money from blog | | | | height=32 alt="CECB"> |
| Relative Positioning | | | | It will affect the position of any text or other |
| Example 1 shows how text and images flow in HTML | | | | elements after it.</p> |
| and then have the position set by a style. | | | | See the image in the flow (no positioning). |
| First you place the image or element that you'd like | | | | Unlike with relative positioning, when you position an |
| positioned relatively into the flow of the page. It's a | | | | element absolutely, it is positioned completely outside |
| good idea to look at where the element will display in | | | | the flow of the document. The browser positions the |
| the flow without any positioning, so that you know | | | | element relative to the 0,0 x,y position in the upper |
| how you'll need to position it.blogging, | | | | left corner of the browser window. |
| blogger,blogspot,make money from blog | | | | <p>If you put an absolutely positioned image on |
| This is the text that you would like the image to | | | | a page |
| follow. Then you place the image... | | | | <img src="cecb2.gif" width="32" height="32" |
| <img src="cecb2.gif" width=32 height=32 | | | | alt="CECB" style="position:absolute; left:200px; |
| alt="CECB"> | | | | top:500px;" /> |
| See the image in the flow (no positioning). | | | | It will not affect the position of any text or other |
| Then add your position styles into the document to | | | | elements after it.</p> |
| change the location of the element. Remember that | | | | See the image with positioning. |
| relative positioning places the positioned element | | | | You can also position your elements with |
| relative to it's normal location in the flow. | | | | percentages. 100% left would be on the right-most |
| <p> This is the text that you would like the | | | | margin of the screen, no matter how wide the |
| image after. Then you place the image and position it | | | | screen was. And 100% from the top would be at |
| underneath the text... | | | | the very bottom of the screen. |
| <img src="cecb2.gif" width="32" height="32" | | | | This image would be placed at the bottom of the |
| alt="CECB" style="position:relative; left:15px; | | | | first screen-full in the browser and half-way across |
| top:-15px;" /></p> | | | | the middle of the document. |
| See the image with positioning. | | | | <img src="cecb2.gif" width="32" height="32" |
| Absolute Positioning | | | | alt="CECB" style="position:absolute;left:50%; |
| Example 2 shows how absolute positioning places | | | | top:100%;" /> |
| objects in relation to the upper left corner of the | | | | See the image with percentage positioning. |