Wickham's XHTML & CSS tutorial
Layers
View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.
Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
problems 
warning: works in some situations or some browsers or needs care to display as you wish 
OK in Firefox, Safari, Opera, Google Chrome and IE
1 The basic arrangement of a div for each layer without a containing div.
A containing div has been added below with float: left; and descriptive text for each example so that two examples can be given side by side. This helps integrate layers with other content without disruption.
The same layers are shown below with div borders to show what is actually happening. There is a containing div with two inner divs for both examples. The inner divs are position: relative and the second inner div is offset top: -20px; left: 15px; the layer required to be on top has a higher z-index than the other to create the layers.
The code for the divs with Layer 1 on top is:-
<div style="float: left; padding: 0;">
Layer 1 on top; position: relative;
<div style="position: relative; font-size: 20px; z-index: 2; padding: 0;">LAYER 1</div>
<div style="position: relative; top: -20px; left: 15px; color: #ffa500; font-size: 30px; z-index: 1; padding: 0;">LAYER 2</div>
</div>
The code for the divs with Layer 2 on top is:-
<div style="float: left; padding: 0; margin-left: 100px;">Layer 2 on top; position: relative:
<div style="position: relative; font-size: 20px; z-index: 3; padding: 0;">LAYER 1</div>
<div style="position: relative; top: -20px; left: 15px; color: #ffa500; font-size: 30px; z-index: 4; padding: 0;">LAYER 2</div>
</div>
2 This shows the same layers but using position: absolute. A containing div is required with position: relative; to maintain position on this page and to provide a base for the position: absolute divs. If a containing div is not provided the examples would find their position relative to the body or a higher container. The containing div also requires a height because the inner divs with position: absolute do not have any effect on the containing div (which assumes a height of zero) except to take their positions from it. With no height the following paragraph has no awareness of the position: absolute divs and moves up.
The code for both divs in one container is:-
<div class="noborder" style="position: relative; height: 50px;">
<div style="position: absolute; font-size: 20px; z-index: 2; padding: 0; border: none;">LAYER 1</div>
<div style="position: absolute; top: 5px; left: 15px; color: #ffa500; font-size: 30px; z-index: 1; padding: 0; border: none;">LAYER 2</div>
<div style="position: absolute; left: 265px; font-size: 20px; z-index: 3; padding: 0; border: none;">LAYER 1</div>
<div style="position: absolute; top: 5px; left: 280px; color: #ffa500; font-size: 30px; z-index: 4; padding: 0; border: none;">LAYER 2</div>
</div>
3 This shows an image with text layered over it. z-index numbers can be almost anything, certainly up to 999, as long as the layer on top has the higher number.
Normally the order of the two layered divs is not critical; in item 1 the first example has z-index: 2 before z-index: 1 and the second example has z-index: 3 before z-index: 4. However, in this example of an image and layered text the div with text must be first in the html file. If the div with the main image is first, the image is rendered and the text takes its position from the bottom of the image, not from the top. I have also added a small image of two coots to show that one image can be layered over another.
The code is:-
<div class="noborder" style="position: relative; top: 150px; left: 30px; font-size: 20px; color: white; z-index: 999;"><img src="images/coots50x50.jpg" alt="Coots"/></div>
<div class="noborder" style="position: relative; top: 55px; left: 110px; font-size: 20px; color: white; z-index: 999;">Little Egret</div>
<div class="noborder" style="position: relative; z-index: 10;"><img src="littleegret.jpg" alt="Little Egret"/></div>
4 This is another way to show an image with text layered over it. A containing div with position: relative has a p tag position: absolute inside it over a background-image.
Little Egret
The code is:-
<div class="noborder" style ="position: relative; background-image: url(littleegret.jpg); width: 320px; height: 240px;">
<p style="position: absolute; left: 110px; top: 20px; font-size: 20px; color: #fff; border: 1px solid white; margin: 0; padding: 5px;">Little Egret</p>
</div>
The containing div must have the style position: relative or the position: absolute of the p tag will not work.
The margin: 0; is required because Firefox creates a margin above a p tag of 20px which would increase the top: 20px; to 40px. IE6 does not add a margin by default, so margin: 0; makes both browsers show the same height from the top.
The border around the p tag is just to show that a p tag is a block element which will accept a border.
Notes
View/Source or View/Page Source in browser menu to see all xhtml code.
The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that the page centralises at large screen resolutions.
A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.
Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.
If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]>
<style type="text/css"> div { margin-top: 30px; } </style>
<![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]>
<link rel="stylesheet" href="ie6.css" type="text/css"/>
<![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).
When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing xhtml code tags which are to be activated.
© Wickham 2006