CSS 4.1 Transitional

1 2 3 4 5 6


Layering

Layering means that with css one can put objects on top of other objects thus layering them. The code that must be used for this is: z-index: ;

The above portrayal has three layers. The bottom most is yellow as: z-index: 1; The layer on top of that is green or: z-index: 2; And the brown stripe is on top is as: z-index: 3; Any numbers can be used including minus numbers, but they must be consecutive. Sometimes it is important where the css z-index is placed as: position: relative; top: -2.1cm; left: 20%; z-index: 2; and not after things like: background-color: #d1c698; font-family: times new roman; font-size: 20px; font-weight: 700;

p.lay { margin-left: auto; margin-right: auto;
position: relative;
top: 1%;
z-index: 1;
height: 100px;
width: 200px;
background-color: yellow; }

p.lay1 { margin-left: auto; margin-right: auto;
position: relative;
top: -2%;
z-index: 2;
height: 100px;
width: 100px;
background-color: green;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5; }

p.lay2 { margin-left: auto; margin-right: auto;
position: relative;
top: -5.7%;
z-index: 3;
height: 10px;
width: 400px;
background-color: brown; }

[p class="lay"] [/p]
[p class="lay1"] [/p]
[p class="lay2"] [/p]

The bottom yellow layer is solid and has no opacity. The second layer green has opacity so that it shows the layer underneath. This is accomplished with:

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

The brown stripe on top has no opacity.

Multiple Links

As mentioned on the first page there can be more than one link color per page. However W3C Markup Validation Service considers it illegal.

[style type="text/css"]
a:link { color: brown; }
a:visited { color: brown; }
Last Page

a:link { color: brown; }
a:visited { color: brown; }
p.link a:link { color: green; }
p.link a:visited { color: green; }

[p class="link"][a href="CSS_3.html"]Last Page[/a]

Last Page

CSS (5 of 6)       Next Page



hr