Skip to Main Content
Creating a Website: The Missing Manual, 3rd Edition
book

Creating a Website: The Missing Manual, 3rd Edition

by Matthew MacDonald
May 2011
Beginner content levelBeginner
584 pages
17h 42m
English
O'Reilly Media, Inc.
Content preview from Creating a Website: The Missing Manual, 3rd Edition

A Few More Layout Techniques

Now that you’ve taken your first steps to becoming a style sheet layout guru, it’s time to cover a few more techniques you might need to know. You won’t use these as often as multicolumn layouts, but they’re still good to keep in your back pocket.

Layering

Remember how you need to position elements carefully when you use absolute positioning to make sure you don’t overlap one element with another? Interestingly, advanced web pages sometimes deliberately overlap elements to create dramatic effects. For example, you might create a logo by overlapping two words, or create a heading by partially overlapping a picture. These tricks use overlapping layers.

To use overlapping layers, you need to tell your browser which element goes on top. You do this through a simple number called the z-index. Browsers put elements with a high z-index in front of elements with a lower one.

For example, here are two elements positioned absolutely so that they overlap:

.Back {
  z-index: 0;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 150px;
  height: 100px;
  background-color: orange;
  border-style: dotted;
  border-width: 1px;
}

.Front {
  z-index: 1;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 230px;
  height: 180px;
  font: xx-large;
  border-style: dotted;
  border-width: 1px;
}

The first class (Back) defines an orange background square. The second class (Front) defines a large font for text. You set the elements’ z-indexes so that the browser superimposes the Front box (which has a ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Creating a Website: The Missing Manual, 4th Edition

Creating a Website: The Missing Manual, 4th Edition

Matthew MacDonald
Learn to Build a Website

Learn to Build a Website

Cassidy Williams, Camryn Williams

Publisher Resources

ISBN: 9781449306823Supplemental ContentErrata Page