Position absolute divs

Using position absolute divs in your website, will enable you to display a navigation bar or other element(s) on a page, or on multiple pages.

Absolutely positioned divs can be located anywhere on the page, either in front of or behind other items. Plus, the code used to create the divs can be placed anywhere within the page.

Absolutely positioned divs can display at any required size and can display any element, including images, text, links, clickable buttons, photographs, videos and Flash movies, etc.

The navigation bar displayed at the top-left of this page is displayed within a position absolute div, as is the second horizontal menu bar, and as are each of the four star characters shown on the page.

If required, it would also be, possible to display the navigation bar and other elements on each page throughout the website.

Because the navigation bars shown on this page are only displayed as examples, the links are disabled.

You can copy the example code shown below for a position absolute div, and paste it into a Raw html block on a test page at your website.

<div style="position: absolute; width: 30em; height: 2em; left: 1em; top: 0em; z-index: 1;">Type text here</div>

The Raw html block containing the code, should ideally be located immediately before the footer block on your page. This will conveniently place the html code out of sight when you are editing other parts of your page, and will not affect where on the page the navigation bar displays.

The code used to position one of the above images on this page is shown below.

<div style="position: absolute; width: 10em; top: 17.5em; left: 49em;"><img alt="" src="https://www.making-websites-made-simple.com/image-files/star-smiley-face.png" style="width: 100%;" /></div>

To use the code shown above on your page, change the URL of the called image to an image that you want to display, and change the width, top and left dimensions to display dimensions that suit your requirements.

Note that em units of measurement are used in the example position absolute divs shown on this page, rather than px units of measurement. You can if you wish, use px units of measurement in place of em units of measurement when using the code within your pages.

You are however encouraged to use em units of measurement. This is because using them is far superior to using other units of measurement. The reasons for this will be explained elsewhere on this website.

Please also note that position absolute divs may not work well with centered page designs, unless the position: absolute; div, is contained within a div that uses the position: relative; declaration. See the example code shown below.

<div style="position: relative;">
<div style="position: absolute; width: 30em; height: 2em; left: 1em; top: 0em; z-index: 1;">Type text here</div>

With centered website designs, the contents of the position absolute div should then move with the rest of the centered page elements when the browser window width is adjusted by a visitor.

You may in some instances need to use measurements such as top: 2em; or even use a negative measurement such as top: -10em; to appropriately position an absolute div on your page.

Set the positioning and size of the absolutely positioned div to display at the size you want and in the location you want on the page.

Preview the page to see the text displayed in the div.

A second copy of the navigation bar is displayed on this page below the header title where it is also moved further in from the left edge of the browser. Plus, the color of the link text is set to display black.

The positioning code for that second absolutely positioned div is displayed below. The link code has been omitted from the example code for clarity.

<div style="position: absolute; left: 13.8em; top: 10.4em;">The link code goes here</a></div>

Note that in the above example, the positioning dimensions are 13.4em from the left edge of the browser window, and 10.4em from the top edge of the browser window.

Before applying the div across the entire website, build the test page at your website and then view the built page using each of the major browsers, especially Internet Explorer, to ensure that the div displays exactly as intended.

Also, re size the width of the browser window to ensure that the div moves in unison with the other elements on the page.

You could add your own include code within the text area of the div, and the code from the included file should then be called into your page.

The include items will then display within the position absolute div when you preview the page.

If you only want the items in the div to display on selected pages, you can make the Raw html block a re-usable block.

If you want the included items to display on all pages at your website, in Solo Build It's BB2 editor, you could drag the Raw html block on to a site-wide dot.

You may in some instances need to adjust the z-index: 1; layer declaration by increasing the layer number to force the div contents to display in front of other absolutely positioned items on the page.

The need to do this would be rare, and you could instead probably dispense with the z-index: 1; declaration entirely.

You could give the div an appropriate class or id name, and then add the controlling CSS style to your website style sheet through the Custom CSS window, instead of locating the style code within the div.

Introducing an absolutely positioned div to a page as described above is fairly easy. The technique is described here to help introduce you to the concept of using absolute divs, and to enable you to experiment and acquire experience.

More efficient ways of introducing absolutely positioned divs into website pages exist, and these are described below. I however, need to experiment more with these technniques before providing you with absolute guidelines to use.

It may be possible to call absolute divs into pages using includes, with the included div code and the div contents called from an external .txt file.

An include file could if required call multiple divs into a page, with each div uniquely named, so that its size, position and other attributes can be controlled from the main style sheet.

Initially, the called divs could each be hidden using appropriate CSS code.

As each div is brought into use, the hide declaration can be removed from the named div style displayed in the style sheet, and replaced with an appropriate styling declaration.

Return to the top of the position absolute page.

Return to the website styles page.

Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | Page 6
Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | Page 6

Article by ©