What is the difference between DIV and SPAN?

div is a block element, span is inline. This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.

CSS z-index - how it works?

z-index goes hand-in-hand with the local stacking context. What is a stacking context? Whenever you specify a z-index, you create a new stacking context. Here's an example:

CSS:

body {
margin: 0;
padding: 0;
}
/* generic style */
div.tile {
position: absolute;
border: 1px solid black;
background: white;
width: 4em;
height: 4em;
}
/* box One */
.a {
top: 0;
left: 0;
}
/* box Two */
.b {
top: 1em;
left: 1em;
}
/* box Three */
.c {
top: 2em;
left: 2em;
z-index: -1;
}
/* box Four */
.d {
top: 3em;
left: 3em;
}
/* box Five */
.e {
top: 4em;
left: 4em;
}

HTML

<div style="position: absolute; z-index: 0;">
<div class="tile a">One</div>
<div class="tile b">Two</div>
<div class="tile c">Three</div>
<div class="tile d">Four</div>
</div>
<div class="tile e">Five</div>

So here we have three stacking contexts, the root of the document (<html>), the plain div, and box Three (.c).

When you specify a z-index, that z-index is the offset relative to the current stacking level.

When the z-index on the plain div is 0, boxes One, Two, Four, and Five stack on top of each other sucessively. Since box Three has a negative z-index it is rendered behind boxes One, Two, and Four, and Five. The stacking order from bottom to top is: 3, 1, 2, 4, 5

If you give the z-index on the plain div a 1, boxes One, Two, Three and Four are rendered in front of box Five (change the position and size of box five, go ahead), but box Three is rendered behind boxes One, Two, and Four, due to its negative z-index. The stacking order from back to front is: 5, 3, 1, 2, 4

If you remove the z-index on the plain div, boxes One, Two, Four, and Five are rendered sucessively on top of each other, and box Three is rendered behind the root stacking context (the html element) and cannot be seen. The stacking order from bottom to top is: 3, root, 1, 2, 4, 5)

CSS Version: CSS2

JavaScript syntax: object.style.zIndex="1"

click here to read the original document.

Read about z-index on wwww.w3schools.com

wwww.w3schools.com example

You can also copy the above CSS and HTML to wwww.w3schools.com "Try It" editor and play with it.

Non-breaking Space in HTML

&nbsp; is the entity used to represent a non-breaking space. It is essentially a standard space, the primary difference is a browser will not not break (or wrap) a line of text at the point that this &nbsp;occupies.

You can use the non-breaking space to indent text and images a small amount. It's not a good idea to use a lot in a row, as older browsers don't support more than one at a time.

The Single Pixel GIF Trick

This uses a transparent GIF image that is 1 pixel square. You take that image and stretch it out to force your HTML to lay the way you want it to. For example:

<p><img src="spacer.gif" alt=" " width="1" height="1" style="margin-right: 5px; margin-left: 5px;" />This paragraph is indented 11 pixels.</p>