Home arrow Style Sheets arrow Page 4 - Introduction to CSS Positioning Properties Part 2

Introduction to CSS Positioning Properties Part 2

In this second part of a two-part article, we examine more positioning properties available in the CSS2 specifications, and use what we've learned to build a simple drop-down menu without employing any JavaScript.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 14
February 28, 2005
  1. · Introduction to CSS Positioning Properties Part 2
  2. · The "clear" property
  3. · The "z-index" property
  4. · The "visibility" property
  5. · The "overflow" property
  6. · A simple drop-down menu using the "overflow" and "display" properties

print this article

Introduction to CSS Positioning Properties Part 2 - The "visibility" property
(Page 4 of 6 )

This property is utilized for controlling whether an element is visually rendered on a document. By assigning the values "visible" or "hidden" to the element, it's possible to display it or hide it from view. However, if the element is hidden, it will preserve the space in the document where it's normally visualized. It's valid to mention that this property must not be interpreted as the "display" property, since this last one will remove completely the element from the document and the document space won't be preserved at all.

As stated above, the possible values for this property are the following:

visibility: visible;

Sets the selected element to be visible on the document.

visibility: hidden;

Sets the selected element to be hidden on the document. The original space occupied is preserved.

visibility: collapse;

Internet Explorer does not support this value.

visibility: inherit;

When the value "inherit" is assigned, it implies that if the parent element is hidden, then the child element will be hidden too. However, if the child's visibility is set to "visible," the parent element's visibility will remain hidden, so you can manipulate the child element in an independent way.  Here's a simple example for this property:

<style type="text/css">

#element1 {

     position: absolute;

     width: 500px;

     top: 200px;

     left: 100px;

     visibility: hidden;



The example shows an element that will be initially hidden from view. However, the space corresponding to the element in the document will be preserved.

Finally, we'll see our last CSS property for visual positioning, which wraps up this short guide for CSS2 positioning: the "overflow" property. 

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials