Page layout with css positioning
So how are positioning and style sheets related? The original cascading style sheets recommendation included very little related to page lay out. With CSS1
* the width and height of an element can be specified
* margins and padding can be specified on an element
* text indent can be applied to the first line of an element
* float and clear provide the means to create columnar layout (up to a point)
Definitely lacking from this list is the ability to specify where the top or left hand side of an element should be.
So what is missing from CSS when it comes to page layout? Blocks can overlap one another, and the front most block obscures blocks underneath it. With HTML, even including CSS1, we can’t do these things.
CSS2 provides the ability to do these kinds of “page layout” things.
Layers
Before we continue, it’s best that we address an important source of misunderstanding, namely the idea of layers. Most developers will have heard of layers, and many will have developed some erroneous ideas about them. Let me try to clarify matters a little.
In one sense, there is no such thing as a layer. In another sense, a layer is a metaphor, but layers themselves don’t exist. . Let me try and explain all this mess.
When we use the term layer, we generally mean an HTML container (or element) that can be placed at some specific location on a web page. . The first confusion that arises about layers in this sense is that many believe a layer is a DIV and can only be a DIV .
A layer in the sense of an HTML element placed somewhere on a web page can be any kind of element (a paragraph, a list item, whatever). Well at least in theory. In practice, Netscape Navigator will let you position Paragraphs and other elements using CSS2, while Internet Explorer really does think that a layer is a DIV. But more of this later.
So, hopefully we’ve cleared up the first and second causes of uncertainty. There is no such thing as a layer HTML element, rather, layer is a term for any HTML element that is positioned on a web page using CSS2.
However, if you take Netscape’s word for it, there is such a thing as an HTML layer, namely the <layer> element. This was a Netscape extension to HTML, that has never been adopted by Internet Explorer, and is certainly not recommended HTML. Simply ignore it, and it should go away.
Having hopefully cleared up these possible stumbling blocks, lets get down to understanding how positioning works.
Positioning in detail
The CSS2 recommendation provides a model for how elements can be positioned. Essentially there are four different ways in which an element can be positioned on a page, with a couple of complicating factors.
Static Positioning
Static positioning is easy. It’s how pages are already laid out by a web browser. A web browser takes an HTML file, parses it into its elements, applies style from a style sheet (or if there is none, from a default style sheet) and then “flows” the elements onto the page. The position that an element, say a paragraph, has in this flow is its static position. We’ll need to remember static positioning when we get to relative positioning below.
Absolute Positioning
Absolute position is what we are all so excited about. In a nutshell, it lets a developer say where the top left hand corner of an element should be located. We’ll look at how we do this a little later, but for now, consider this complicating factor. Suppose I say, P#title {position: absolute; top: 200px; left: -100px;}
Is this with respect to the top left hand of the web page, or the element which contains the paragraph of ID title? With CSS2, its the latter. That is, with CSS2, when you specify a position, it is with respect to the position of the parent element. Don’t get this confused with relative positioning, which we’ll look at below.
Fixed Positioning
Fixed position is a subset of absolute position. When an element is absolutely positioned, its positioned with respect to the element which contains it. When the page is scrolled, the element also scrolls. Wouldn’t it be nice if we could position elements with respect to the top of the window, so that regardless of how the page is scrolled, the elements remain fixed? You guessed it, fixed positioning provides precisely this feature. With fixed positioning and the OBJECT element in HTML, we can do away with frames forever, yet gain all the advantages, with none of the disadvantages of the FRAME construct.
Relative Positioning
Relative positioning is probably a little unfortunately named. Positioning relative to what? A lot of people jump to the conclusion that relative positioning is when you specify a position with respect to the parent element, and absolute positioning is when the position is specified with respect to the top left hand corner of the page. But as we have just seen, this is not how it works.
OK, so what is relative? In essence, relative positioning places an element with respect to where it would statically be positioned. When you relatively position an element, as a developer you are saying to a browser: “hey, take this paragraph, and put it 10 pixels down and 10 pixels to the right of where it would normally be.”
As we saw with absolute positioning, there is another complicating factor. What if we have a relatively positioned parent element, with an absolutely positioned child element? By analogy with absolute positioning you’ll probably guess that the absolutely positioned child element will be placed with respect to the top left hand corner of the parent element.
The issue of positioning isn’t particularly difficult, I trust, but it is a bit tricky. I hope this irons out the issue of the different kinds of positioning available in CSS2. A little later we’ll look at how to put these into practice.
Types of Element
Before we continue with a detailed analysis of the different positioning properties, and how they can be used, let’s take a quick look at the different kinds of HTML elements, and how these interact with positioning.
CSS and HTML provide three kinds of HTML elements
- block elements
- inline elements
- list item elements
Block elements are separated from surrounding elements in the flow of the HTML page. <P> and <DIV> are examples of block elements.
Inline elements are not separated from surrounding elements in the flow, but rather follow directly on from their adjacent elements. <B> and <CITE> are examples of inline elements.
List item elements display similarly to block elements, but in addition, a marker (a bullet, or an alpha numeric character) is added to the left of the element.
Now, the CSS2 recommendation does not discriminate between different elements or kinds of elements when it comes to positioning. Theoretically, you can position a <CITE> element absolutely, just as you can a <DIV> relatively, or a <P> statically. In practice, browsers don’t support positioning particularly extensively. To be safe, apply absolute position only to DIVs.
Positioning Properties
We looked at the big picture, and the theory, now we are going to take a look at the detail, and learn how to implement what we’ve been talking about. In this section we take a look at each of the CSS2 properties.
position
What it does
The position property specifies how an element should be positioned. Above we saw that there are four types of positioning, static, absolute, fixed and relative.
Default Values
If no position is specified for an element, it has a position of static.
Is it inherited?
position is not inherited, however, keep in mind that the position of a parent element can affect the position of its children.
‘left’
What it does
Specifies where the left hand side of an element should be positioned.
If an element has a static position, this property has no effect
If an element has a relative position, then this property specifies where the element should be placed with respect to where it would be statically placed. For example, H1 {position: relative; left: 10%} places the left hand side of Headings of level 1 10% of the width of the parent element to the right of where they would otherwise be.
If an element has an absolute position, this property specifies where the left hand side of the element should be with respect to the left hand side of the parent element.
If an element has a fixed position, it specifies the left hand side with respect to the left hand edge of the window.
Possible Values
left can be specified as
- a percentage
- a unit value
- by the keyword
auto
Percentage values refer to that percentage of the width of the parent element.
auto refers to the current location of an element.
Default Values
If no left is specified for an element, the default value is auto.
Is it inherited?
left is not inherited, but the left of an element may be affected by the position of its parent element.
‘top’
What it does
Specifies where the top side of an element should be positioned.
If an element has a static position, this property has no effect
If an element has a relative position, then this property specifies where the element should be placed with respect to where it would be statically placed.
If an element has an absolute position, this property specifies where the top side of the element should be with respect to the top side of the parent element.
If an element has a fixed position, it specifies the top side with respect to the top edge of the window.
Possible Values
top can be specified as
- a percentage
- a unit value
- by the keyword
auto
Percentage values refer to that percentage of the height of the parent element.
auto refers to the current location of an element.
Default Values
If no top is specified for an element, the default value is auto.
Is it inherited?
top is not inherited, but the top of an element may be affected by the position of its parent element.
‘width’
What it does
This property specifies the width of an element. It can be applied to block elements, replaced elements (elements like IMGs) and any element with a position of absolute or fixed.
Possible Values
width can be specified as
- a percentage
- a unit value
- by the keyword
auto
Percentage values refer to the width of the parent element.
Unit values (such as pixels and ems) allow the specification of width using values with these units.
A width of auto places the right edge of the element immediately inside the right inner edge of its parent element.
Default Values
If no value is specified for width, the default value is auto.
Is it inherited?
width is not inherited from the parent element.
‘height’
What it does
This property specifies the height of an element. It can be applied to block elements, replaced elements (elements like IMGs) and any element with a position of absolute or fixed.
Possible Values
height can be specified as
- a percentage
- a unit value
Percentage values refer to the height of the parent element.
Unit values (such as pixels and ems) allow the specification of height using values with these units.
Default Values
If no value is specified for height, the default value is auto.
Is it inherited?
height is not inherited from the parent element.
‘overflow’
What it does
Because height and width can be specified, we face the potential problem that the content of an element will not fit into its area. What’s to be done? If you are familiar with frames, you might be able to guess.
The overflow property allows you to specify what happens in this situation. Content that does not fit inside the area can be clipped, can overflow, or scroll bars can be drawn to accommodate the content, as happens with frames.
Possible Values
overflow can be specified as one of
visible
Specifies that the width and or height of an element should be adjusted to accommodate the contents that don’t fit into the original area of the element.
hidden
Specifies that the contents should be ‘clipped’ to the height and width of the element. Anything that does not fit into this area is not visible
scroll
Specifies that scroll bars should always appear on the element, regardless of whether they are necessary.
auto
Specifies that scroll bars should be drawn only when scrolling is necessary to accommodate the content that does not fit into the dimensions of the element.
Default Values
If no value is specified for overflow, the default is visible.
Is it inherited?
The overflow of an element is not inherited from its parent.
As with much of CSS2, the implementation of this property in the major browsers (Netscape 4 and 4.5 and Internet Explorer 4, 4.5 and 5) is poor.
z-index
What it does
Now that elements can be laid anywhere on a page, what happens when they overlap? Which of two or more elements obscures the others? The z-index property allows us to specify this.
Possible Values
z-index can be specified as either the keyword auto, or by using an integer.
A z-index of auto specifies that an element should be stacked on a page in the order it appears in the HTML source.
For example, with these paragraphs
<P>This is the first paragraph</P>
<P>This is the second paragraph</P>
The second paragraph is closer to the front of the page than the first paragraph. If for whatever reason these paragraphs overlapped, the second would obscure the first. This might happen with the following style sheet rule
P {position: absolute; left: 10px; right 10px}
Though I’m not sure why you’d have that rule.
Where z-index is specified using an integer, the higher the integer, the closer to the front of the page.
There are however some complicating factors. z-indexes are not applicable to the whole page, but only within a particular containment hierarchy. This means that the z-index of parent elements is important in determining which element obscures another. Let’s try an example.
Suppose you have an absolutely positioned image with a z-index of 10 in a paragraph of z-index 1, and an image of z-index 2 in another paragraph of z-index 5. If the two images overlap, which obscures the other? In this case it is the image with the lower z-index, because its parent paragraph has the higher z-index. So the paragraph with the higher z-index obscures the one with the lower z-index, and as a consequence the contents of the paragraph with the higher z-index obscure the contents of the paragraph with the lower z-index, regardless of the z-indexes of the contents.
It’s logical, if a little convoluted.
Another subtle aspect is the question of how to make the contents of an element be closer to the front of the page, or further from the front of the page than the element itself. When the z-index of an element is less than zero, then the parent element is closer to the front of the page, when the z-index of an element is more than zero, the element is closer to the front of the page.
Hope that’s clear.
Default Values
By default, the z-index is auto.
Is it inherited?
While z-index is not inherited, the above discussion explains how the z-index of a parent element is relevant to the element and its stacking order.
‘visibility’
What it does
visibility lets you specify whether or not an element is visible. You might wonder why anyone would want an invisible element, but keep in mind that web pages are dynamic, so that their state can change over time, or depending on user interaction. A lot of the current DHTML tricks do little more than manipulate the visibility of elements on a web page.
Possible Values
visibility can take one of three values
visible
as you’d guess, specifies that an element should be visible
hidden
as also should be apparent, specifies that an element should not be visible. Keep in mind that the element may not be visible, but its presence is still felt in how the page is laid out. The browser still allows space for the element (it is there after all) its just that the contents aren’t visible. If you want an element to be in the source but its presence to complete vanish, set the display to none (e.g. P {display: none}.)
inherit
If you want an element to have the same visibility as the element which contains it, then set the visibility to inherit.
Default Values
If no visibility is set, then an element has a visibility of inherit.
Is it inherited?
As we have seen, visibility can be inherited. By default it is.
clip
What it does
Clipping is a technical programming term that will probably gain some wider use just as the term rendering has over the last couple of years.
Think about a graphic that is larger than the web browser window that you are viewing it in. Does it spill outside the window? Not if the browser is well developed. The image is clipped to the window frame (technically to the frame of the viewport, which is the contents of the window).
With CSS2, you can specify the dimensions of an element that should be visible, and the element is clipped to this rectangle.
Possible Values
The clip is specified as a rectangle, with each edge of the rectangle (top, left, bottom, right) being specified as either a length value or by the keyword auto.
Alternatively, the clip can be specified as auto, which means essentially that the element shouldn’t be clipped.
Because this feature is as yet unsupported on any browser, we won’t go into any great detail.
Default Values
By default, the clip of an element is auto.
Is it inherited?
clip is not inherited. However, theoretically the clip of an element’s parent could cause the element to be clipped.
Hints and suggestions
Simply ignore this feature until told otherwise.
Hands on
Now that we know the theory behind positioning, let’s put it to practice with an exercise. Its quite straightforward, but has a nice effect, and should get you underway with positioning and style sheets.
Creating Drop Shadows
Drop shadows are a common effect, that on the web are impossible without resorting to graphics. Well, maybe not impossible,with CSS2.
Here is the problem. We want to create an effect where the text in a dark color is shadowed by the same text in a lighter color and offset a little to the right and down. Looks like we’ll need the use of the following properties
absolute position (to place the element and its shadow)left to specify the position of the left edge of the element and its shadowtop to specify the position of the top edge of the element and its shadowz-index to ensure that the shadow is beneath the text
Creating the element and its shadow
First we need to create the elements that will contain the text and its shadow. Note that we said in our discussion that CSS2 applies to any element. So in theory, you should be able to apply an absolute position to any element. In practice, web browsers support CSS2 in such a limited way, that only the DIV element is to be trusted for positioning.
Our first step is to create the HTML source for two elements, with identical text, which will become our element and its shadow.
We’ll need to create two DIVs, with the same content, but with different classes. Let’s call the classes text and shadow.
Creating the Style Sheet rules
Each element is going to be identical in a number of ways, and differ subtly in a number of others.
The content is going to be identical. The size and weight of the text is going to be identical. Both elements are going to be absolutely positioned.
The shadow is going to be a different color from the text. The top and left of the shadow will be a little offset from the top and left of the text.
We now need to create two rules. One to select a DIV of class text, the other to select a DIV of class shadow.
They will have the same font-size and font-weight properties. Make the text quite large and bold so as to be able to appreciate the effect.
You’ll then need to specify absolute positioning, and set the left and top of the text element, as well as a slightly offset left and top for the shadow element. Lastly, make the shadow a little different in color (usually a little lighter or darker) to complete the effect.
Make sure also that the text is on top of the shadow by setting the z-index of each appropriately.
Drop Shadows In Action
Have you previewed your handiwork? does it look like what you expected? You might need to tweak it by adjusting the top and left of the shadow. Also note that this isn’t a robust example. I wouldn’t trust it to work on every platform just because it works OK on yours.
I hope that it has been useful, and that I’ve cleared the air a bit about how positioning works, and how you can use it.
If you have any comments about the tutorial, and how it might be improved, please let me know.
Example Answers to Hands on Tutorial
Example HTML Source
<DIV class=”text”>This is an example of a drop shadow</DIV>
<DIV class=”shadow”>This is an example of a drop shadow</DIV>
Example Style Sheet
DIV.text {
font-size: xx-large;
font-weight: bold;
position: absolute;
left: 100px;
top: 100px;
z-index: 2
}
DIV.shadow {
font-size: xx-large;
font-weight: bold;
color: gray;
position: absolute;
left: 103px;
top: 103px;
z-index: 1
}
