Lesson 12 - Cascading Style Sheets/Positioning

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. Static - The location is normal, laid out according to the normal flow. The 'left' and 'top' properties do not apply. Relative - The box's position is calculated according to the normal flow, then the box is offset relative to its normal position. Absolute - The box's position is specified with the 'left' and 'top' properties with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of other boxes. Let's look at an example of position:relative and position:absolute.
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. Auto - The computer automatically sets the value based on normal flow. Length - The offset is a fixed distance from the left/right edge. Percentage - The offset is a percentage of the containing block's width. (try it).
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. Auto - The computer automatically sets the value based on normal flow. Length - The offset is a fixed distance from the top/bottom edge. Percentage - The offset is a percentage of the containing block's height. If the containing block's height is not fixed, 'percentage' acts like 'auto'. (try it).
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`. Auto - The computer automatically sets the value based on the z-index of the parent box. *integer* - any integer. A box with 'z-index=250' will appear on top of a box with 'z-index=19', which in turn, will appear on top of a box with 'z-index=0'. Note: Internet Explorer recognizes negative integer values, some other browsers do not; therefore it is recommended to make all integers positive. (try it).
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. None - The location is normal, laid out according to the normal flow. Text does not flow around the box, but starts on the line below the box. Left - The box is positioned to the left of the line it is on and all text flows around the right side of the box. Right - The box is positioned to the right of the line it is on and all text flows around the left side of the box. (try it).
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. None - The computer allows text to flow as previously declared. Left - Text stops flowing around the box with 'float:left'). Right - Text stops flowing around the box with 'float:right'). Both - Text stops flowing around both boxes. (try it).
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. Auto - Each browser has its own interpretation of 'auto', but usually it provides a scroll if needed. Visible - This value indicates that content is not clipped, i.e., it may be displayed outside the container. Hidden - This value indicates that the content is clipped and that no scrolling mechanism should be provided to view the overflow; viewers will not have access to clipped content. The size and shape of the clipping region is specified by the 'clip' property. Scroll - Displays a scroll (whether needed or not) to view overflow contents. (try it).
clip:	Possible values include 'auto' (which is the default setting) and 'rect( )'. Auto - The clipping region (what is displayed) has the same size and location as the box. rect( ) - rect(top right bottom left) sets the clipping region (what is displayed) relative to the top and left sides of the box. i.e. rect(10 100 150 20) means the top of the clipped area is 10px below the top of the element (box); the right side of the clipped area is 100px from the left edge of the element; the bottom of the clipped area is 150px from the top of the element and the left side of the clipped area is 20px from the left edge of the element. (try it).
visibility:	Possible values include 'visible' (which is the default setting), 'hidden' and 'collapse'. This command determines whether the viewer can see the box. Visible - The box is displayed. Hidden - The box is not displayed, but still takes up space on the page. Collapse - Used when the box is a table row or column. For advanced users. (try it).

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:

aliceblue

lightblue

blue

navy

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

By now, your sample3.htm file should look like this.