Style allows web page designers to position anything anywhere on the page. Here are the Style declarations that effect positioning:
position: | Possible values include 'static' (which is the default setting), 'relative'
and 'absolute'. This sets the location of the "box", or whatever element you are
positioning.
|
left: right: |
Possible values include 'auto' (which is the default setting), 'length'
and 'percentage'. When positioning a box, this value tells the computer how
far to place it relative to the left/right edge of the parent container.
|
top: bottom: |
Possible values include 'auto' (which is the default setting), 'length'
and 'percentage'.
When positioning a box, this value tells the computer how far to place it relative to the
top/bottom edge of the parent container.
|
z-index: | Possible values include 'auto' (which is the default setting) and 'integer'.
The z-index of a box determines how it is stacked on the web page. Higher z-indexes
are on top. If the Background attribute of a box is set to 'transparent', parts of
lower z-index boxes will show through. Z-index only works with
position:absolute or position:relative.
|
float: | Possible values include 'none' (which is the default setting), 'left' and
'right'. This sets the location of the "box", and determines whether text will flow
around it. Similar to Float declaration with the Img tag.
|
clear: | Possible values include 'none' (which is the default setting), 'left',
'right' and 'both'. This value tells the computer to stop flowing
text around the box. Similar to the Clear declaration with the Img tag.
|
overflow: | Possible values include 'auto' (which is the default setting), 'visible',
'hidden' and 'scroll'. When a box is larger than the container it is in,
or if you want to show only part of the box, this property tells the computer what to
do with the excess.
|
clip: | Possible values include 'auto' (which is the default setting) and 'rect( )'.
|
visibility: | Possible values include 'visible' (which is the default setting), 'hidden'
and 'collapse'. This command determines whether the viewer can see the box.
|
Open a new blank HTML file. Call it sample3.htm. Place Style tags in your Head section and add the following classes (you may cut and paste):
<style type="text/css">
<!--
. . .
.navy { background-color:navy; color:white; font-size:12pt }
.blue { background-color:blue; color:white; font-size:12pt }
.lblue { background-color:lightblue; color:black; font-size:12pt }
.ablue { background-color:aliceblue; color:black; font-size:12pt }
. . .
-->
</style>
. . .
Now add the following in the Body section (again, cut and paste):
. . .
</head>
<body>
. . .
<div class="ablue" style="position:absolute; left:0px; top:0px;
z-index:1; width:100px; height:100px">aliceblue</div>
<div class="lblue" style="position:absolute; left:25px; top:25px;
z-index:2; width:100px; height:100px">lightblue</div>
<div class="blue" style="position:absolute; left:50px; top:50px;
z-index:3; width:100px; height:100px">blue</div>
<div class="navy" style="position:absolute; left:75px; top:75px;
z-index:4; width:100px; height:100px">navy</div>
. . .
</body>
</html>
It should look like this:
Change the position:absolute to position:relative and see what happens. Change it back to position:absolute and delete the text (the displayed names of the colors). Now add a short paragraph immediately after the 'navy' Div tags. Notice it is displayed under the colored squares. Give the paragraph position:relative and z-index=6 and find that it appears over the squares. Place the paragraph immediately before the 'navy' Div tags and see that it appears the same. Place it before all the Div tags and see it still appears the same. Change any one of the squares to visibility:hidden.
Change the left and top commands of the squares to make them appear in a horizontal line. ...in a vertical line. ...so all four squares are touching at one point.
Type two long paragraphs (use unintelligible words to speed the typing). Give one of the paragraphs position:absolute and locate it away from the squares. Give the same paragraph a width:200. Now give the other paragraph a position:absolute and width:200 also, and position it next to the first paragraph so they appear as two columns.
- In this lesson, we learned about these Style properties:
- position
- left
- top
- z-index
- overflow
- clip and
- visibility