The purpose of this tutorial is to provide some basic CSS coding that can be used position images on a page in specified locations. The images may placed on top of each other or to the right or left of each other or above or below each other. The positioning is up to the artist's artistic vision. Once placed the opacity of each image can then be adjusted to produce the desired effect.
An identifier must be assigned to each element to be positioned and named inside the
<Style></Style> tags located in the Head section of your document.
The # sign is the identifier used which is followed by the { curly bracket and the co-ordinates of identified element and a closing } The co-ordinates are specified in pixel sets and denote the distance left from the top left of the page and the distance down from the top of the page.
The identifier takes the following format.
which are the co-ordinates of the image you see on the left. The
div tag is then used to execute the identifier and place the element in the specified location.
<div id=pic1><
img src="profteach.gif" width=138 height=126 alt="prof">
# pic2{ position:absolute;left:1100px;top:350px;z-index:2; }
<div id=pic2><img src="blackboard.gif" width=138 height=126 alt="board">
# pic3{ position:absolute;left:1100px;top:500px;z-index:3;opacity:0.3; }
<div id=pic3><img src="dust.gif" width=138 height=126 alt="chalk dust">
# text{ position:absolute;left:100px;top:550px;z-index:4; }
<div id=text><table><tr><td>dusty blackboard</td></tr></table>
Z-index
The
z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top. Note-2: The default
z-index is 1. A negative value may be assigned and is used by the professor when a
full screen option is provided as an option.
The opacity property specifies the opacity/transparency of an element. The opacity property ranges from opacity:0; Transparent to opacity:1; Opaque not able to be seen through; not transparent. Opacity values are indexed in tenths The first digit to the right of the decimal point; one out of 10 equal parts of a whole.
With the opacity set at opacity:0.1; You see 90% of elements in an elements that are in a lower order.
With the opacity set at opacity:0.9; You only see 10% of elements in an elements that are in a lower order.
Now that the stacking order has been determined, assembly of the elements can begin. The opacity of the chalk dust will be applied when the assembly has been completed. The blackboard is moved to begin the assembly demonstration.
left:1100px;top:350px;
- Add chalk dust to the blackboard
left:1120px;top:1050px;
- Add text to blackboard
left:860px;top:1050px;
- Set dust opacity
left:720px;top:1050px;opacity:0.3;
- Locate the pointer
left:410px;top:1095px;
