Common ways of specifying position-related properties in CSS include the following:
position
top
right
left
bottom
overflow
z-index
position
The position property specifies what kind of position is used. Possible values include:
- static (default): indicates that the element will be placed at the default location. Please note that if static is specified, values for the top, bottom, right, and left properties will have no effect.
- absolute: places an element in relation to the actual browser window. The position of the element moves along with the rest of the content when the page is scrolled.
- relative: specifies how the element will be positions relative to how it would have been positioned by default.
- fixed: places an element in relation to the actual browser window. The position of the element remains fixed even when the page is scrolled.
top, right, bottom, left
Positions in each direction (top, right, bottom, left) can be specified as a percentage, as a length, or 'auto'.
Let's take a look at an examples:
CSS Code
|
div {
background-color:#FF00FF;
width:500px;
height:60px;
}
p {
position:relative;
top:10px;
left:50px;
}
|
The HTML code,
<div>
<p>Sample text.
</div>
|
renders
Notice that the location of the text above: it is 10px from the top of the pink container and 50px from the left of the pink container.
overflow
The overflow property indicates how the content will be displayed when it exceeds the containing element. Possible values are:
- visible: The entirety of the content is shown, regardless of the height specified for the element.
- hidden: Only the content within the containing element is shown.
- scroll: Displays the vertical and horizontal scroll bar to allow scroll of the content, regardless of whether the content exceeds the containing element.
- auto: If the content is beyond the containing element, a scroll bar is displayed.
Examples for each type of overflow property are shown below:
auto
We are using this area to show how different values of the overflow property will behave. This particular one is on the auto value.
|
hidden
We are using this area to show how different values of the overflow property will behave. This particular one is on the hidden value.
|
visible
We are using this area to show how different values of the overflow property will behave. This particular one is on the visible value.
|
scroll
We are using this area to show how different values of the overflow property will behave. This particular one is on the scroll value.
|
z-index
The z-index property specifies the stack order of an element. In other words, when there is an overlap between two elements, the z-index value determines which one shows up on top. The element with a larger z-index value will appear on top.
For example, say we define two blocks with the following CSS code:
|
#redblock {
z-index: 1;
position:
absolute;
width:80px;
height:100px;
top:20px;
left:20px;
border: 1px solid #FFF;
background-color: #FF0000;
}
#pinkblock {
z-index: 2;
position: absolute;
width:100px;
height:80px;
top:50px;
left:50px;
border: 1px solid #FFF;
background-color: #FF00FF;
}
|
The following HTML code,
<div id="redblock"></div>
<div id="pinkblock"></div>
|
will render the following:
As we can see, the pink block, with a z-index value of 2, lies on top of the red block, which has a z-index value of 1.
Next: CSS Text
Copyright 1keydata.com 2007, 2008, All Rights Reserved. Privacy Policy
|
|