Positioning and Visibility

In this lesson of the CSS tutorial, you will learn...
  1. To work with the position property.
  2. To work with the top, bottom, left, and right properties.
  3. To work with the z-index property.
  4. To work with the display property.
  5. To work with the visibility property.
  6. To work with the float property.
  7. To work with the clear property.

Element Flow

The flow is the way in which elements are laid out. By default, sibling elements are all in the same flow and positioned statically on the page; the order elements appear on the page is the same as the order they appear in the code. With CSS, we can move elements into a separate flow. This allows us more control over the design of the page and over the layout of our code.

Position

The position property is used to determine how an element is positioned. The default value is static. Other options are:

  • absolute
  • relative
  • fixed

Absolute Positioning

When elements are positioned absolutely, they are removed from the normal flow. As a result, they do not affect the positioning of subsequent sibling elements. Elements are positioned absolutely by setting the position property to absolute and specifying one or more "offset" properties.

Offset Properties: top, right, bottom, and left

The "offset" properties are top, right, bottom, and left. Their values can be specified in number of units (e.g, 10px) or percentage of the containing block (e.g, 20%). These properties offset the element from the containing block element.

Code Sample: PositioningAndVisibility/Demos/PositioningAbsolute.html

<html>
<head>
<title>CSS Absolute Positioning</title>
</head>
<body>
<h1 style="color:#0000ff; 
   position:absolute; top:70px; left:50px; 
   border:2px solid #0000ff; background-color:#ffff00;">
   CSS Absolute Positioning</h1>
<h2>From the Left and the Top</h2>
<div style="color:#cc3333">
Notice how this text is in the upper corner.  
That's because the preceding h1 element has been absolutely positioned.<br />
Positioning an element absolutely takes the element out of the 
regular flow of the document.
</div>
</body>
</html>
Code Explanation

he code above will render the following results.

Notice how the positioning of the h2 and div elements is not affected by the <h1> tag that precedes them. This is because the <h1> element has been absolutely positioned.

Code Sample: PositioningAndVisibility/Demos/PositioningAbsolute2.html

<html>
<head>
<title>CSS Absolute Positioning</title>
</head>
<body>
<h1 style="color:#0000ff; 
   position:absolute; bottom:70px; right:50px;
   border:2px solid #0000ff; background-color:#ffff00;">
   CSS Absolute Positioning</h1>
<h2>From the Right and the Bottom</h2>
<div style="color:#cc3333">
Notice how this text is in the upper corner.  
That's because the preceding h1 element has been absolutely positioned.<br/>
Positioning an element absolutely takes the element out of 
the regular flow of the document.
</div>
</body>
</html>
Code Explanation

The code above will render the following results.

The h1 element is positioned 50 pixels from the right and 70 pixels from the bottom of the body of the page.

Relative Positioning

When elements are positioned relatively, they are positioned relative to where they would normally appear in the normal flow. They do affect the positioning of subsequent sibling elements. Elements are positioned relatively by setting the position property to relative and specifying one or more "offset" properties as described above in "Offset Properties: top, right, bottom, and left".

Code Sample: PositioningAndVisibility/Demos/PositioningRelative.html

<html>
<head>
<title>CSS Relative Positioning</title>
</head>
<body>
<h1 style="color:#0000ff; 
   position:relative; top:60px; left:50px; 
   border:2px solid #0000ff;">CSS Relative Positioning</h1>
<h2>From the Left and the Top</h2>
<div style="color:#cc3333; font-weight:bold;">
The h1 element on this page has been positioned relative 
to where it otherwise would be.<br />
All other content on the page (including these sentences) 
will show up in the same position it
would have if the h1 had not been positioned at all.
</div>
</body>
</html>
Code Explanation

The code above will render the following results.

Notice how the paragraph text is positioned as if the h1 element had not been moved from its default position. This is because the h1 element has been relatively positioned.

Code Sample: PositioningAndVisibility/Demos/PositioningRelative2.html

<html>
<head>
<title>CSS Relative Positioning</title>
</head>
<body>
<h1 style="color:#0000ff; 
   position:relative; bottom:30px; right:30px; 
   border:2px solid #0000ff;">CSS Relative Positioning</h1>
<h2>From the Right and the Bottom</h2>
<div style="color:#cc3333; font-weight:bold;">
The h1 element on this page has been positioned relative to 
where it otherwise would be.<br />
All other content on the page (including these sentences) 
will show up in the same position it
would have if the h1 had not been positioned at all.
</div>
</body>
</html>
Code Explanation

The code above will render the following results.

The h1 element is positioned 30 pixels from the right and 30 pixels from the bottom of where it would normally be. As it would normally be in the upper-left corner, it is pushed out of the browser window.

Fixed Positioning

Elements with fixed positioning are supposed to stay in the same position in the browser window even when the page is scrolled.

Fixed positioning is not yet well supported.

Z-index

The z-index property specifies the stack level of an element on the page compared to other elements in its same flow. It takes a number as a value. The higher an element's z-index, the closer to the user it appears.

Code Sample: PositioningAndVisibility/Demos/Zindex.html

<html>
<head>
<title>CSS Z-Index</title>
</head>
<body>
<h1>CSS Z-Index</h1>

<div style="position:absolute; left:50px; top:50px; font-family:Century; 
   font-size:2em; font-weight:bold; color:#0000ff; 
z-index:20;">Webucator</div>
<div style="position:absolute; left:52px; top:52px; font-family:Century; 
   font-size:2em; font-weight:bold; color:#ff0000; 
z-index:10;">Webucator</div>

<div style="position:absolute; left:150px; top:150px; height:100px; 
   width:100px; border:15px solid red; z-index:40;"></div>
<div style="position:absolute; left:185px; top:185px; height:100px; 
   width:100px; border:15px solid blue; z-index:30;"></div>
<div style="position:absolute; left:185px; top:150px; height:100px; 
   width:100px; border:15px solid green; z-index:20;"></div>
<div style="position:absolute; left:150px; top:185px; height:100px; 
   width:100px; border:15px solid orange; z-index:10;"></div>

</body>
</html>
Code Explanation

The above code will render the following results.

Notice how some div elements sit on top of the others. If you switch their z-index values, they will stack the other way.

Display

The display property is used to determine if and how an element appears. The most common values are shown below.

  • block
  • inline
  • none

The most common uses of display are:

  1. To show and hide elements based on user interaction. A common example is a drop-down menu. This dynamic change of style is done with JavaScript.
  2. To hide elements for certain media. For example, the images might be "turned off" by setting the display to none in a style sheet for print.
  3. Converting an inline element such as a link to a block element by setting its display property to block.

Visibility

The visibility property is used to make an element invisible. Possible values are:

  • visible
  • hidden

The major difference between setting an element's visibility to hidden and setting its display to none is that an hidden element still affects the layout of the page; whereas an element that has a display of none does not.

Float

Float can be applied to any element that is not absolutely positioned. It is used to specify whether an element should float to the left, to the right, or not at all. Possible values are listed below.

  • left
  • right
  • none

When an element floats left it will be aligned to the left of the containing element and all subsequent content will align to its right until the bottom of the element is reached.

When an element floats right it will be aligned to the right of the containing element and all subsequent content will align to its left until the bottom of the element is reached.

When the subsequent content has a fixed width, will not flow beneath the floating div, but rather will honor its set width.

Code Sample: PositioningAndVisibility/Demos/Float.html

<html>
<head>
<title>CSS Float</title>
</head>
<body>
<h1 style="text-align:center">CSS Float</h1>

<div style="float:left">
 <h2>Float Left</h2>
 <div style="width:100px; border: 2px solid black">
  <img src="Images/block.gif" height="50" 
   width="50" style="float:left" />
  This is just text. This is just text. This is just text.
 </div>
 <h2>Float Left - Div</h2>
 <div style="width:100px; height:180px; border: 2px solid black">
  <div style="float:left;">
   <img src="Images/block.gif" height="50" width="50" />
  </div>
  <div style="width:40px; float:left;">
  This is just text. This is just text. This is just text.
  </div>
 </div>
</div>

<div style="float:right">
 <h2>Float Right</h2>
 <div style="width:100px; border: 2px solid black">
  <img src="Images/block.gif" height="50" 
   width="50" style="float:right" />
  This is just text. This is just text. This is just text.
 </div>
 <h2>Float Right - Div</h2>
 <div style="width:100px; height:180px; border: 2px solid black">
  <div style="float:right">
   <img src="Images/block.gif" height="50" width="50" />
  </div>
  <div style="width:40px;">
  This is just text. This is just text. This is just text.
  </div>
 </div>
</div>
</body>
</html>
Code Explanation

The above code will render the following.

Clear

The clear property is used to specify whether content that is flowing to the side of a floating block should drop down beneath that block. Possible values are shown below.

  • left
  • right
  • both
  • none

The files PositioningAndVisibility/Demos/FloatPosition.html and PositioningAndVisibility/Demos/FloatPosition2.html demonstrate how clear and float can be used in combination with positioning to produced virtually any blocked page layout.

Code Sample: PositioningAndVisibility/Demos/FloatPosition.html

<html>
<head>
<style type="text/css">
#wrapper {
 position:absolute;
 left:50%;
 top:30px;
 width: 450px;
 margin-left:-225px;
}

.box {
 border: 2px solid #ff6600;
 background-color:#000066;
 color:#ff9900;
 text-align:center;
 font-size:100px;
 font-weight:bold;
 font-family:Arial, Helvetica, sans-serif;
}

#box2 {
 top:10px;
 left:10px;
 height:200px;
 width:200px;
}

#box1 {
 float:right;
 height:400px;
 width:200px;
 margin-bottom:15px;
}

#box3 {
 height:100px;
 width:100%;
 clear:both;
}
</style>
<title>Positioning Boxes</title>
</head>

<body>
<div id="wrapper">
 <div id="box1" class="box">1</div>
 <div id="box2" class="box">2</div>
 <div id="box3" class="box">3</div>
</div>
</body>
</html>
Code Explanation

The above code will render the following.

Code Sample: PositioningAndVisibility/Demos/FloatPosition2.html

<html>
<head>
<style type="text/css">
#wrapper {
 width:800px;
}

#insideWrapper {
 width:612px;
 position:relative;
 left:50%;
 margin-left:-311px;
}

.box {
 border: 2px solid #ff6600;
 background-color:#000066;
 color:#ff9900;
 text-align:center;
 font-size:100px;
 font-weight:bold;
 font-family:Arial, Helvetica, sans-serif;
}

#box1 {
 float:left;
 top:10px;
 left:10px;
 height:300px;
 width:200px;
}

#box2 {
 float:left;
 height:400px;
 width:200px;
}

#box3 {
 float:left;
 height:300px;
 width:200px;
}

#divClear {
 height:50px;
 clear:both;
 border:4px solid #000000;
 background-color:red;
}

#divTop {
 height:50px;
 border:4px solid #000000;
 background-color:blue;
}
</style>
<title>Positioning Boxes</title>
</head>

<body>
<div id="wrapper">
 <div id="divTop" style=""></div>
 <div id="insideWrapper">
  <div id="box1" class="box">1</div>
  <div id="box2" class="box">2</div>
  <div id="box3" class="box">3</div>
 </div>
 <div id="divClear" style="background:red"></div>
</div>
</body>
</html>
Code Explanation

The above code will render the following.

Positioning and Visibility Conclusion

In this lesson of the CSS tutorial, you have learned to use CSS properties to control positioning and visibility.

To continue to learn CSS go to the top of this page and click on the next lesson in this CSS Tutorial's Table of Contents.

Use of this website implies agreement to the following:

Copyright Information

All pages and graphics on this Web site are the property of Webucator, Inc. unless otherwise specified.

None of the content on this website may be redistributed or reproduced in any way, shape, or form without written permission from Webucator, Inc.

No Printing or saving of web pages

This content may not be printed or saved. It is for online use only.

Linking to this website

You may link to any of the pages on this website; however, you may not include the content in a frame or iframe without written permission from Webucator, Inc.

Warranties

This website is provided without warranty of any kind. There are no guarantees that use of the site will not be subject to interruptions. All direct or indirect risk related to use of the site is borne entirely by the user. All code and explanations provided on this site are provided without warranties to correctness, performance, fitness, merchantability, and/or any other warranty (whether expressed or implied).

For individual private use only

You agree not to use this online manual to deliver or receive training. If you are delivering or attending a class that is making use of this online manual, you are in violation of our terms of service. Please report any abuse to courseware@webucator.com. If you would like to deliver or receive training using this manual, please fill out the form at http://www.webucator.com/Contact.cfm.