z-index property css

via http://css-tricks.com/almanac/properties/z/z-index/

div { z-index: 1; /* integer */ }

Property Values

Value	Description	Play it
auto	Sets the stack order equal to its parents. This is default	Play it »
number	Sets the stack order of the element. Negative numbers are allowed	Play it »
inherit	Specifies that the z-index should be inherited from the parent element

controls the vertical stacking order of elements that overlap.

z-index only effects elements that have a position value other than static (the default).

Negative margin has pulled the element over another. Absolutely positioned elements overlap each other.

Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top).

Elements with non-static positioning will always appear on top of elements with default static positioning.

Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.

Note that older version of IE get this context stuff a bit screwed up. Here’s a jQuery fix for that：

$(function() { var zIndexNumber = 1000; // Put your target element(s) in the selector below!

$(“div”).each(function() { $(this).css(‘zIndex’, zIndexNumber);

zIndexNumber -= 10; }); });

Display: None;

.hide { display: none; } //content “inaccessible” by screen readers.

Hiding an Element – display:none or visibility:hidden

Hiding an element can be done by setting the display property to “none” or the visibility property to “hidden”. However, notice that these two methods produce different results:

• visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
• display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there