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

 

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

生活在西班牙

自己动手丰衣足食

BlueAsteroid

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

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

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

%d bloggers like this: