Adding a Div Element To Place an Item

Add an absolute positioned div element with CSS tutorial

In this short tutorial we will add an element (image, text) to an HTML page, then locate it on the page using css code to move it to any location.

A "div" is a handy way to quickly add a picture, animation, form or any other item to a webpage. Once added you can move the item around on the page easily. The advantage of using a "div" is that you can "locate" and "layer" the item over any other page element except for some Flash and video content. Works with HTML5, 4.01 and responsive websites.

Note: You may not be able to locate the element over video or Flash animations.

Adding a DIV

Step 1 of 3:
Add the code for the element you want to re-locate into your webpage (image, text, etc). Somewhere inside the <!-- CONTENT --> or <!-- MAIN TABLE --> area. Generally you'll want to add the item you wish to add anywhere in the main body text area of the webpage. Example, let's say you want to add a small picture on the left side on top of the menu as in the above example, do the following steps.


Step 2 of 3:
Add the following div code around the picture or text on the html page. (you can select and copy and paste the code below):

<div id="locator">
<img src="picts/yourpicturename.jpg"><br>
</div>


Step 3 of 3:
Add the following line to your .css file (may be named "style.css" "coolstyle.css" or similar):

#locator { position: absolute; visibility: visible; left: 20px; top: 300px; z-index: 200; }

...optionally include a height and width like this:

#locator { position: absolute; visibility: visible; left: 20px; top: 300px; height: 100px; width: 150px; z-index: 200; }

Adjust the location by changing the left and top numbers in the code above.

If your website does not include a global css file, you can add the css code into the <head> of your HTML document by enclosing it between <style type="text/css"> and closing </style> tags. Add the css just before the </head> tag as in the following example.

Copy and paste css code (with open and close tags) if you do not have a global css file (add to your HTML page):

<style type="text/css">

#locator { position: absolute; visibility: visible; left: 20px; top: 300px; height: 100px; width: 150px; z-index: 200; }

</style>


Note: Make the z-index number greater if you do not see the element on the page. You can not put any items over video or Flash animation without adjusting their respective codes. If you can not see your item, it may be hidden underneath some page element. Try moving it around some more by editing the css code.