CSS: z-index

Määrab elemendi/objekti asukoha z-teljel. Ehk - võimaldab määrata üksteisega muidu kattuvatele positsioonidele määratud elementidele selle, milline element on "tähtsam" ja tuleks kuvada eespool. Mida kõrgem on numbriline väärtus, seda eespool objekt/element kuvatakse. Väärtused võivad olla ka negatiivsed.

Näited:

Järgneval dokumendi on img elementi kasutatud z-index abil taustapildina. See on vaid näitlik materjal, tegelikkuses on korrektsem lisada taustapilt CSS atribuudi background abil. Võid proovida ka muuta z-telje väärtust nii, et img elemendil see suurem on ning uurida, mis siis juhtub.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
p {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
}
img {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
</head>
<body>

<div>

<img src="http://www.interneti.info/pildid/interneti.info.logo.sinine.png" alt="logo" />

<p>Mauris pharetra tempus leo. Fusce mollis. Aliquam erat volutpat. Curabitur quis arcu. Aenean vitae
est. Sed imperdiet eleifend est. Maecenas turpis lectus, tristique at, laoreet et, pellentesque ac, felis. 
Nulla quis dui. Sed metus diam, feugiat vel, laoreet et, sodales eu, turpis. Curabitur in massa et sem 
viverra auctor. Suspendisse aliquam ultrices pede. Nullam risus nibh, ullamcorper non, consequat a, rhoncus 
vitae, eros. Suspendisse scelerisque nisl in tortor. Curabitur iaculis.</p>

</div>

</body>
</html>

© Margo Munner | Sisukaart