complete css guide
Page layout properties
Introduction to positioning with CSS
One of the most significant limitations of HTML has been the inability to lay pages out in the same way they are laid out on paper. It can be possible, although not always, to lay out pages using tables and transparent 1 pixel gifs, but this both violates our principle of separating content from appearance, and is guaranteed to cause maintenance headaches until the end of time, as new browser versions fail to lay out the pages exactly as they worked in older browsers. This method really is something to be avoided, and now that we have page layout properties courtesy of CSS, there really is no excuse for using it.
So how are page layout and style sheets related? The original cascading style sheets recommendation included very little related to page layout. With CSS1
- the
width
andheight
of an element could be specified margin
andpadding
could be specified on an elementtext-indent
could be applied to the first line of an elementfloat
andclear
provided 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, either relative to where it would otherwise be in the flow of the document, or in relation to the top left hand corner of the page.
To address this lack of positioning, CSS2 provided far more sophisticated positioning properties. We cover all these, as well as some background concepts and terms here.
The big picture
So what is missing from HTML when it comes to page layout? Let's think about desktop publishing for a moment. Software like Quark Express and PageMaker (and even less powerful page layout applications) generally allows the user to take blocks of content (text and or images) and place them directly on a page at any location. Blocks can overlap one another, and the front most block obscures blocks underneath it. With HTML, we can't do these things.
CSS2 provides the ability to do these kinds of "page layout" things.
A note about "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's try to clarify matters a little.
In the simple sense, there is no such thing as a layer. In a more complex sense, a layer is a metaphor, but layers themselves don't exist. But if you include Netscape's proprietary extensions to HTML, then yes Virginia, there is such a thing as a layer. 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. Applications such as DreamWeaver use the term in this way. The first confusion that arises about layers in this sense is that it's often thought that a layer is a div
and can only be a div
. This isn't so. 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 4 will let you position paragraphs and some other elements using CSS2, while Internet Explorer 4 and 5 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. Indeed it has already done so, as Netscape 6 does not support this element.
Having hopefully cleared up these possible stumbling blocks, let's get down to understanding how positioning works.
And <div>
s?
The <div>
is the generic block element. You can place other elements such as <paragraph>
s inside <div>
s, and then the whole block can easily be positioned on the page. But just because you use a <div>
does not mean you have to give this <div>
position properties at all. And, on the other hand, you don't need to use a <div>
in order to use positioning - you can use positioning for any HTML element. Note though that some older browsers only supported positioning properties when they were applied to the <div>
element.
Ways of positioning
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 with respect to its parent element. It is not with respect to the window. Don't get absolute positioning confused with relative positioning, which we'll look at below.
Fixed positioning
Fixed position is closely related to absolute position. When an element is absolutely positioned, it's 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 4, 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 at all.
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."
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. Below we'll look at how to put these into practice.
Positioning enables very sophisticated page layout, but as with any powerful technology, it is complicated at times.
The page layout properties are:
- position
- top
- left
- bottom
- right
- width
- min-width
- max-width
- height
- min-height
- max-height
- z-index
- visibility
- overflow
- float
- clear
- clip
position
Browser support
Get browser support information for position in the downloadable version of this guide or our browser support tables.
What it does
If you want to position an element you have to specify not just a set of coordinates that say where you want it to be, you also have to specify what these coordinates are with respect to. The position
property is used to determine what the coordinates are with respect to, or how the element will be drawn. The actual position (the where) is specified using the top
, left
, bottom
and right
properties which we cover below.
Possible values
Elements can be positioned in one of four ways: statically, relatively absolutely or fixed. The value is specified by one of four keywords: static
, relative
, absolute
and fixed
.
These values are explained in detail above, but to recap:
When the position of an element is static
, the browser will draw the element in the usual place. Essentially, this is the traditional positioning used with HTML.
When the position of an element is relative
, it is placed with respect to its natural position, that is, with respect to where it would be if statically positioned.
For example, with a relative position, a top
of 20px and a left
of 20px (we'll look at the top
and left
properties very shortly), an element is placed 20px to the right and 20px down from where it would naturally, or statically be located.
With absolute
positioning, an element is placed in a specified location with respect to its parent element. If the parent element is the <body>
, the location of the element may appear to be with respect to the window. However, when the page is scrolled it should be apparent that it is not: the element will move so it is no longer (for example) 20px from the top of the window. However, it is in fact still 20px from the top of the <body>
.
fixed
positioning is different. Here the element really is positioned with respect to the window. This means if the page is scrolled, the element remains onscreen, fixed with respect to the top and left of the window.
Applications like Dreamweaver and GoLive create <div>
s with absolute positioning, plus values for top
and left,
width
and height
, to build page layout. This is because, as you'll see in the browser support information on this page, for a long time this was the only way you could use CSS positioning and expect support in even the most recent browsers. The level of support, however, has improved.
Default values
When no position property is specified, an element has a static
position
.
Is it inherited?
An element does not inherit the position
property of its parent.
Hints and suggestions
Take some time to consider the differences between the different types of positioning.
top
Browser support
Get browser support information for top in the downloadable version of this guide or our browser support tables.
What it does
The top
property specifies where the top of an element will be placed. Remember, though, to position an element you must also specify a value for its position
property.
top
is an offset from either
- the top edge of the natural location of the element (for
position: relative
) - the top of the parent element (for
position: absolute
) - the top of the window (for
position: fixed
)
See position
above for more on what the individual values mean.
Negative top
values move an element up the page, positive top values move the element down the page.
For elements with a position: static
, top
has no effect.
Possible values
The top
of an element can be specified using length values, percentage values, or using the auto
keyword.
Length values
When the top
is specified using a length value, the element is offset up or down the page with respect to a location determined by the position
value of the element.
We cover length values in detail in our section on values.
Percentage values
When top
is specified as a percentage value, the element is offset up or down the page by this percentage of the height of its parent element.
We cover percentage values in detail in our section on values.
Auto
A top
of auto
places the element with no offset up or down the page.
Default values
If no top
is specified, the top of the element is auto
.
Is it inherited?
An element does not inherit the top
of its parent, however, an element may be affected by the positioning of its parent element.
Hints and suggestions
top
specifies where an element appears in conjunction with the position
property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position
property works to ensure that you achieve your desired outcomes. We cover the position
property in detail above.
left
Browser support
Get browser support information for left in the downloadable version of this guide or our browser support tables.
What it does
The left
property specifies where the left of an element will be placed. Remember, though, to position an element you must also specify a value for its position
property.
left
is an offset from either
- the left edge of the natural location of the element (for
position: relative
) - the left of the page or the left of the parent element (for
position: absolute
) - the left of the window (for
position: fixed
)
See position
above for more on what the individual values mean.
Negative left
values move an element leftwards along the page, positive left values move the element rightwards.
For elements with position: static
, left
has no effect.
Possible values
The left
of an element can be specified using length values, percentage values, or using the auto
keyword.
Length values
When left
is specified using a length value, the element is offset to the left or to the right along the page from a location determined by the position
value of the element.
We cover length values in detail in our section on values.
Percentage values
When left
is specified as a percentage value, the element is offset to the left or to the right along the page by this percentage of the width
of its parent element.
We cover percentage values in detail in our section on values.
Auto
A left of auto
places the element with no offset leftwards or rightwards on the page.
Default values
If no left
is specified, the left of the element is auto
.
Is it inherited?
An element does not inherit the left
of its parent. However, the left of an element can be affected by the position of its parent.
Hints and suggestions
left
specifies where an element appears in conjunction with the position
property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position
property works to ensure that you achieve your desired outcomes. We cover the position
property in detail above.
bottom
Browser support
Get browser support information for bottom in the downloadable version of this guide or our browser support tables.
What it does
The bottom
property specifies where the bottom edge of an element will be placed. Remember, though, to position an element you must also specify a value for its position
property.
bottom
is an offset from either
- the bottom edge of the natural location of the element (for
position: relative
) - the bottom of the parent element (for
position: absolute
) - the bottom of the window (for
position: fixed
)
See position
above for more on what the individual values mean.
For elements with a position: static
, bottom has no effect.
Possible values
The top
of an element can be specified using length values, percentage values, or using the auto keyword.
Length values
When the top
is specified using a length value, the element is offset up or down the page from a location determined by the position
value of the element.
We cover length values in detail in our section on values.
Percentage values
When bottom
is specified as a percentage value, the bottom edge of an element is offset up or down the page by this percentage of the height of its parent element.
We cover percentage values in detail in our section on values.
Auto
A bottom of auto
places the element with no offset up or down the page.
Default values
If no bottom
is specified, the bottom of the element is auto
.
Is it inherited?
An element does not inherit the bottom
of its parent.
Hints and suggestions
bottom
specifies where an element appears in conjunction with the position
property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position
property works to ensure that you achieve your desired outcomes. We cover the position
property in detail above.
right
Browser support
Get browser support information for right in the downloadable version of this guide or our browser support tables.
What it does
The right
property specifies where the right edge of an element will be placed. Remember, though, to position an element you must also specify a value for its position
property.
right
is an offset from either
- the right edge of the natural location of the element (for
position: relative
) - the right of the parent element (for
position: absolute
) - the right of the window (for
position: fixed
)
See position
above for more on what the individual values mean.
For elements with a position: static
, right has no effect.
Possible values
The right
of an element can be specified using length values, percentage values, or using the auto
keyword.
Length values
When right
is specified using a length value, the right edge of the element is offset to the left or to the right along the page from a location determined by the position
value of the element.
We cover length values in detail in our section on values.
Percentage values
When right
is specified as a percentage value, the right edge of the element is offset to the left or to the right along the page by this percentage of the width of its parent element.
We cover percentage values in detail in our section on values.
Auto
A right
of auto
places the right edge of an element with no offset leftwards or rightwards on the page.
Default values
If no right
is specified, the right
of the element is auto
.
Is it inherited?
An element does not inherit the right
of its parent.
Hints and suggestions
right
specifies where an element appears in conjunction with the position
property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position
property works to ensure that you achieve your desired outcomes. We cover the position
property in detail above.
width
Browser support
Get browser support information for width in the downloadable version of this guide or our browser support tables.
What it does
Not surprisingly, this property specifies how wide an element will appear on the page.
Possible values
width
can be specified as a percentage, as a length value, or as auto
.
Percentage values
When a width
is specified as a percentage, its width is this percentage of the width of its parent. We cover percentage values in detail in our section on values.
Length values
A width
can be specified as a length. Lengths are covered in detail in our section on values.
Auto
A width
of auto
is the default width of an item. This means it will be as wide as it needs to be to fully display its content.
Default values
If no value is set for the width
of an element, its width
is set to auto
.
Is it inherited?
An element does not inherit the width
of its parent.
Hints and suggestions
width
was specified as part of the original CSS1 recommendation. It is modified in part by the CSS2 recommendation.
Using percentage values or relative length values such as em creates flexible pages that can be comfortably viewed on a wide range of devices.
min-width
Browser support
Get browser support information for min-width in the downloadable version of this guide or our browser support tables.
What it does
This property allows you to specify a minimum width for an element. When the width of an element is calculated, should it be less than a value specified for min-width
, the value for min-width
will be used.
Possible values
min-width
can be specified as a percentage, as a length value, or none.
Percentage values
When a min-width
is specified as a percentage, its min-width
is this percentage of the width of its parent. We cover percentage values in detail in our section on values.
Length values
A min-width
can be specified as a length. Lengths are covered in detail in our section on values.
Default values
If no value is set for the min-width
of an element, its min-width
is set to none
.
Is it inherited?
An element does not inherit the min-width
of its parent.
max-width
Browser support
Get browser support information for max-width in the downloadable version of this guide or our browser support tables.
What it does
This property specifies allows you to specify a maximum width for an element. When the width of an element is calculated, should it be greater than this property, max-width
specifies the width of the element.
Possible values
max-width
can be specified as a percentage, as a length value, or none
.
Percentage values
When a max-width
is specified as a percentage, its max-width
is this percentage of the width of its parent. We cover percentage values in detail in our section on values.
Length values
A max-width
can be specified as a length. Lengths are covered in detail in our section on values.
Default values
If no value is set for the max-width
of an element, its max-width
is set to none.
Is it inherited?
An element does not inherit the max-width
of its parent.
height
Browser support
Get browser support information for height in the downloadable version of this guide or our browser support tables.
What it does
The height property enables you to specify the height of an element in a number of ways.
Possible values
height
can be specified as a percentage, as a length value, or as auto
.
Percentage values
When a height
is specified as a percentage, its height is this percentage of the height of its parent. We cover percentage values in detail in our section on values.
Length values
A height
can be specified as a length. Lengths are covered in detail in our section on values.
Auto
A height of auto
is the default height of an item. This means it will have only the height it needs to fully display its content.
Default values
If no value is set for the height
of an element, its height
is set to auto
.
Is it inherited?
An element does not inherit the height
of its parent.
Hints and suggestions
height
was specified as part of the original CSS1 recommendation. It is modified in part by the CSS2 recommendation.
min-height
Browser support
Get browser support information for min-height in the downloadable version of this guide or our browser support tables.
What it does
This property allows you to specify a minimum height for an element. When the height of an element is calculated, should it be less than a value specified for min-height
, the value for min-height
will be used.
Possible values
min-height
can be specified as a percentage or as a length value.
Percentage values
When a min-height
is specified as a percentage, its min-height
is this percentage of the height of its parent. We cover percentage values in detail in our section on values.
Length values
A min-height
can be specified as a length. Lengths are covered in detail in our section on values.
Default values
If no value is set for the min-height
of an element, its min-height
is set to 0
.
Is it inherited?
An element does not inherit the min-height
of its parent.
max-height
Browser support
Get browser support information for max-height in the downloadable version of this guide or our browser support tables.
What it does
This property allows you to specify a maximum height for an element. When the height of an element is calculated, should it be greater than this property, max-height
specifies the height of the element.
Possible values
max-height
can be specified as a percentage, as a length value, or none
.
Percentage values
When a max-height
is specified as a percentage, its max-height
is this percentage of the height of its parent. We cover percentage values in detail in our section on values.
Length values
A max-height
can be specified as a length. Lengths are covered in detail in our section on values.
Default values
If no value is set for the max-height
of an element, its max-height
is set to none.
Is it inherited?
An element does not inherit the max-height
of its parent.
z-index
Browser support
Get browser support information for z-index in the downloadable version of this guide or our browser support tables.
What it does
Because CSS allows the absolute positioning of elements on a page, we need to take care of the situation where elements overlap. The "stacking order" is specified using the z-index
property. It determines which elements will appear in front of others when they overlap.
Possible values
z-index
is specified either by an integer, or by the keyword auto
.
Integer Values
Where z-index
is specified using an integer, given two elements with a common parent, the element with the higher z-index
is in front of the one with the lower z-index
.
There are however some complicating factors. An element's z-index
is not applicable to the whole page, but only within that element's 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-index
es 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.
Auto
When the z-index
is specified as auto
, the browser determines the place of an element in the stacking order according to a relatively complicated set of rules, but in a nutshell, it uses the order in which the elements appear in the HTML code of the page.
Default values
Where no z-index
is specified, the z-index
of an element is auto
.
Is it inherited?
An element does not inherit the z-index
of its parent element. However, the stacking of elements is relative to parent elements. That is, where we have two elements, both with child elements, then all of the child elements of the parent with the higher z-index
are in front of all of the child elements of the other parent element.
Hints and suggestions
Although the rules associated with stacking seem complicated, they are in fact the intuitive way for stacking to work. If there are two elements, each with child elements, then it makes sense that all of the children of the front-most element would be in front of all of the children of the element behind.
This same rule can be applied recursively, so that within an element, if more than one child itself has child elements, then the children of the front-most child are all in front of the children of the other child. And so on ad infinitum.
visibility
Browser support
Get browser support information for visibility in the downloadable version of this guide or our browser support tables.
What it does
While it might not at first seem to make much sense to make an element of a page invisible, in conjunction with Javascript, showing and hiding elements when a user clicks, or moves a mouse over an element, or even based on time, can be a powerful tool. The visibility
property lets you make an element either visible or invisible.
Possible values
visibility
can be specified as one of three keywords, visible
, hidden
and inherit
.
A visibility
of visible and hidden are straightforward.
A visibility
of inherit specifies that an element should have the same visibility
as its parent.
Default values
If no visibility
is specified, an element has a visibility
of inherit
.
Is it inherited?
An element only inherits its parent's visibility
if the element's visibility
is set to inherit
.
Hints and suggestions
An element with a visibility
of hidden
still affects the drawing and layout of a page. The page is still laid out as if the element were visible. If you would like page to be laid out as if the element were not there at all (and for the element to also be invisible) then the display property which we discuss elsewhere has a possible value of none
, which has the described effect.
overflow
Browser support
Get browser support information for overflow in the downloadable version of this guide or our browser support tables.
What it does
Because the width and height of elements can be set by an author, we may have the situation where an element is not big enough to fit its contents. What do we do when this occurs? For images, traditionally the image is scaled to fit the size of the element. CSS introduces the overflow
property to let you specify how a browser should display an element where its contents do not all fit into its width and height.
Possible values
overflow
can take the keyword values visible
, hidden
, scroll
, and auto
.
An overflow
of visible
means that the browser should increase the actual width and/or the height of the element to display all of its contents. If the element has a background color or image this arguably should not be extended behind the content.
An overflow
of hidden
means that the browser should 'clip' the contents, displaying only the contents which are visible within the specified width and height.
An overflow
of scroll
means that the browser should place scrollbars on the element whether or not the contents of the element have overflowed.
An overflow
of auto
means that the browser should add scrollbars as needed to enable users to scroll horizontally and/or vertically to show hidden contents of the element.
The last two values should be familiar to those who have worked with frames in HTML. Frames can have a scroll specified never, always and auto. These correspond to hidden
, scroll
and auto
.
Default values
If no overflow
is specified, the overflow
of an element is visible
.
Is it inherited?
An element does not inherit the overflow
of its parent.
Hints and suggestions
Theoretically, with the overflow
property, the need for frames is greatly reduced. Unfortunately, as of the time of writing, most browsers, particularly older ones, do not fully support the overflow property.
float
Browser support
Get browser support information for float in the downloadable version of this guide or our browser support tables.
What it does
Of all the CSS positioning properties, float
and clear
are probably the two that most users will have had least exposure to.
float
has a simple effect, but follows what can be a quite complicated set of rules. The effect of the float
property is to take an element out of the flow and place it to the left or right of other elements in the same parent element.
Possible values
float
can be specified by one of three keywords: none
, left
and right
.
A float
of none
means that an element flows as it would naturally in the flow of its page.
A float
of left
means that an element is detached from the natural flow of the page, and is treated as a block element to the left of the rest of the contents of its parent element.
A float
of right
means that an element is detached from the natural flow of the page, and is treated as a block element to the right of the rest of the contents of its parent element.
Default values
If no float
is specified, elements have a float
of none
.
Is it inherited?
An element does not inherit the float
of its parent.
Hints and suggestions
Floating can be a tricky concept, although the basic effect is quite straightforward. Sadly too, float has only recently become well supported by browsers. In conjunction with clear
, float
can be used to make text and image flow around each other in the same way as they do in paper-based publications.
clear
Browser support
Get browser support information for clear in the downloadable version of this guide or our browser support tables.
What it does
The clear
property can be used in conjunction with float
to specify whether and or where an element allows floating alongside it. You can specify whether an element can have elements floated to its left, to its right, or at all. When an element does not allow floating on a side, where an attempt is made to float an element to that side, the element appears below the floated element.
Possible values
clear
can be specified as any one of the keywords none
, left
right
or both
.
A clear
of none
means that an element allows floating on either side.
A clear
of left
means that an element does not allow floating on its left.
A clear
of right
means that an element does not allow floating on its right.
A clear
of both
means that an element does not allow floating on either it's left or its right.
Default values
If no clear
is specified, an element has a clear
of none
, allowing floating on both sides.
Is it inherited?
An element does not inherit the clear
of its parent.
Hints and suggestions
float
and clear
are properties that will become, when properly supported by browsers, very useful tools for creating pages which adapt to their readers' screens. Until recently, the support is limited and buggy, especially for complex cases. In conjunction with float
, clear
can be used to make text and image flow around each other in the same way as they do in paper-based publications.
clip
Browser support
Get browser support information for clip in the downloadable version of this guide or our browser support tables.
What it does
The clipping area is that part of an element that is actually drawn, regardless of the size or location of an element. By specifying an element's clip
it is possible to show only part of the element at a time. I would classify this as one of the advanced features of CSS, with powerful but specialized uses.
Possible values
Currently, CSS allows the clip
of an element to be specified as either a shape or by the keyword auto
.
At present, the only kind of shape that is defined is the rectangle. We discuss the shape value more fully in our section on values.
A clip
of auto
means that the clipping area will match the extent of the element, that is its width and its height.
Default values
Where no value is specified, the clip
of an element is auto
.
Is it inherited?
An element does not inherit the clip
of its parent, but see hints below for how the clip
and the parent's clip
work together to determine the actual region where the element will be drawn.
Hints and suggestions
While the clip
specifies the clipping region for the element, the actual region in which the element is drawn is the intersection between the area in which the parent will be drawn and the clip
of the element.
Note that the clip
property can only be applied to elements that have a position
value of absolute
or fixed
.