Browse DevX
Sign up for e-mail newsletters from DevX


CSS: Position and Visibility : Page 2

Learn how to position specified items on the screen as well as alter the visibility.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Display: {display: none/""/block/inline/list-item}
The display property's most practical function is to hide or show an element. This function is often used in Dynamic HTML to hide and display elements based on the user's actions. (See Hide and Zeek).

The value none prevents the contents of an element from being displayed by telling the computer to ignore the element. Unlike the visibility property where invisible boxesare still generated and still affect the layout, {display: none} prevents the box from being generated at all, so the element's box does not affect the layout. "" is the null command; it shows a box that was previously hidden.

The display property also lets you define what kind of object an element is; this function is not used often. Elements can belong to three categories: block, in-line (inline), and list-item. A block element is usually a heading, paragraph, or another element that is displayed as a unit. An in-line element is located inside a block. A list-item element is an item located within a list tag.


If you are using a CSS-enabled browser, click on "Display" below to see the different values for the display property.

  • none
  • ""
  • block
  • inline
  • list-item

Click again to make the list disappear. Notice how the layout changes as the list appears and disappears.

This is part of the code that was used for the above function:

 	target = document.all( targetId );
  		if (target.style.display == "none")
 			target.style.display = "";
  			target.style.display = "none";

For more explanation, see Hide and Zeek.

Visibility: {visibility: visible/hidden}
The visibility property lets you control the visibility of an element's box;it is often used to display only one of many overlapping elements.

Visible makes a box visible, and hidden makes a box invisible. The layout of a document is still affected by an invisible box as though it were visible. A hidden box is rendered transparently and takes up space. In contrast, the display property prevents a box from being generated at all, so the element's box does not affect the layout and does not take up space.


	img {visibility: hidden}


If you are using a CSS-enabled browser, the above Project Cool logo is not visible, but it still takes up space in this page's layout because the image's box is being generated.

	img {visibility: visible}


If you are using a CSS-enabled browser, you can now see the Project Cool logo.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date