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



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s




Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......







Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision


Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness



Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web

John's Weblog

Just another WordPress.com weblog

%d bloggers like this: