<!
DOCTYPE HTML >
<
html >
<
head >
<
title >CSS
2 .
1 Test Suite: z-index</
title >
<
link rel=
"author" title =
"Robert O'Callahan" href=
"mailto:robert@ocallahan.org" />
<
link rel=
"author" title =
"Mozilla Corporation" href=
"http://mozilla.com/ " />
<
link rel=
"help" href=
"http://www.w3.org/TR/CSS21/visuren.html#z-index " />
<
meta name=
"flags" content=
"" />
<
style >
.container {
position:absolute;
width:
400 px;
height:
100 px;
font -size:
0 ;
background-color:yellow;
line-height:
0 ;
z-index:
0 ;
}
.container >
div {
height:
100 px;
margin-bottom:-
100 px;
}
.negative {
width:
380 px;
background-color:blue;
position:relative;
z-index:-
1 ;
}
.block {
width:
360 px;
background-color:purple;
}
.float {
float:left;
width:
340 px;
margin-right:-
340 px;
background-color:green;
}
.inline {
width:
320 px;
display:inline-block;
background-color:pink;
}
#outline {
width:
300 px;
outline:
20 px solid gray;
outline-offset:-
20 px;
}
.positioned {
width:
280 px;
background-color:magenta;
position:relative;
}
.positive {
width:
260 px;
background-color:orange;
position:relative;
z-index:
1 ;
}
</
style >
</
head >
<
body >
<
div class=
"container" >
<
div class=
"positive" ></
div >
<
div class=
"positioned" ></
div >
<
div id=
"outline" ></
div >
<
div class=
"inline" ></
div >
<
div class=
"float" ></
div >
<
div class=
"block" ></
div >
<
div class=
"negative" ></
div >
</
div >
</
body >
</
html >
Messung V0.5 in Prozent C=100 H=100 G=100
¤ Dauer der Verarbeitung: 0.10 Sekunden
(vorverarbeitet am 2026-06-08)
¤
*© Formatika GbR, Deutschland