Pokud nám nedostačují možnosti pozicování objektů v dokumnetu v běžné sledu, potebujeme je z toho sledu vymanit a umístit je jinam. K tomu slouží pozicování v CSS.
| Hodnota | poziční schéma | Poznámka |
|---|---|---|
| Relative | relativní pozicování
umožňuje umístění posunem vzhledem k přirozené pozici objektu v dokumentu |
pozice rámce (boxu) je vypočtena s ohledem na normální řazení a poté se rámec (box) posune relativně vzhledem ke své normální poloze (kde měl být v normálním řazení) |
| Absolute/fixed | absolutení pozicování umožňuje umístění na konkrétní pozici danou souřadnící. Poznámky:
|
absolutepozice rámce (boxu) je určena vlastnostmi top, left, bottom, right, rámce (boxy) jsou vyňaty z normálního řazení Fixednejprve se pozice vypočte jako u vlastnosti absolute, ale posouvání obsahu se nehýbe |
| static | statické pozicování řazení v normálním sledu | Výchozí hodnota, vlastnosti top, left, bottom, right se neaplikují |
Následující příklad ukazuje, jak lze pozicování k vytvoření zajímavého nadpisu.
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/HTML; charset=iso-8859-2">
<TITLE>Absolutní umístění a z-index</TITLE>
<STYLE TYPE="text/css"><!--
.nadpis { font-size: 60px; width:500px;height:100px;display:block;
/*position:relative;*/border:1px solid red;
font-style: bold }
body {margin-top:0;margin-left:0;text-align:center}
--></STYLE>
</HEAD>
<BODY>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt diam risus penatibus malesuada. Habitasse Vivamus Pellentesque iaculis vel tempus a libero urna quis porttitor. Eget leo eget felis platea elit et ut porttitor velit risus. Porttitor Pellentesque platea eleifend laoreet tortor habitant nonummy malesuada metus Phasellus. Enim semper Aliquam magna tincidunt lacus ullamcorper porttitor ac Curabitur Nulla. Hendrerit tellus mauris In sit vel. </p>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt diam risus penatibus malesuada. Habitasse Vivamus Pellentesque iaculis vel tempus a libero urna quis porttitor. Eget leo eget felis platea elit et ut porttitor velit risus. Porttitor Pellentesque platea eleifend laoreet tortor habitant nonummy malesuada metus Phasellus. Enim semper Aliquam magna tincidunt lacus ullamcorper porttitor ac Curabitur Nulla. Hendrerit tellus mauris In sit vel. </p>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt diam risus penatibus malesuada. Habitasse Vivamus Pellentesque iaculis vel tempus a libero urna quis porttitor. Eget leo eget felis platea elit et ut porttitor velit risus. Porttitor Pellentesque platea eleifend laoreet tortor habitant nonummy malesuada metus Phasellus. Enim semper Aliquam magna tincidunt lacus ullamcorper porttitor ac Curabitur Nulla. Hendrerit tellus mauris In sit vel. </p>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt diam risus penatibus malesuada. Habitasse Vivamus Pellentesque iaculis vel tempus a libero urna quis porttitor. Eget leo eget felis platea elit et ut porttitor velit risus. Porttitor Pellentesque platea eleifend laoreet tortor habitant nonummy malesuada metus Phasellus. Enim semper Aliquam magna tincidunt lacus ullamcorper porttitor ac Curabitur Nulla. Hendrerit tellus mauris In sit vel. </p>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt diam risus penatibus malesuada. Habitasse Vivamus Pellentesque iaculis vel tempus a libero urna quis porttitor. Eget leo eget felis platea elit et ut porttitor velit risus. Porttitor Pellentesque platea eleifend laoreet tortor habitant nonummy malesuada metus Phasellus. Enim semper Aliquam magna tincidunt lacus ullamcorper porttitor ac Curabitur Nulla. Hendrerit tellus mauris In sit vel. </p>
<DIV CLASS="nadpis">
<SPAN STYLE="position: absolute; left: 1px; top: 1px;
color: #000080; z-index: 1;font-size:65%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 2px; top: 2px;
color: #483D8B; z-index: 2;font-size:70%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 3px; top: 3px;
color: #555555; z-index: 3;font-size:75%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 4px; top: 4px;
color: #777777; z-index: 4;font-size:80%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 5px; top: 5px;
color: #999999; z-index: 5;font-size:85%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 6px; top: 6px;
color: yellow; z-index: 6;font-size:90%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 7px; top: 7px;
color: #dAdAdd; z-index: 7;font-size:95%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 8px; top: 8px;
color: #0D0; z-index: 8">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 9px; top: 9px;
color: #dd0000; z-index: 9;font-size:102%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 10px; top: 10px;
color: #0000EE; z-index: 10;font-size:105%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 11px; top: 11px;
color: #00EE00; z-index: 11;font-size:108%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 12px; top: 12px;
color: #EA0A0; z-index: 12;font-size:110%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 13px; top: 13px;
color: #0000AA; z-index: 13;font-size:113%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 14px; top: 14px;
color: darkred; z-index: 14;font-size:120%">Duke Nuken 3D</SPAN>
<SPAN STYLE="position: absolute; left: 15px; top: 15px;
color: red; z-index: 15;font-size:119%">Duke Nuken 3D</SPAN>
</DIV>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt diam risus penatibus malesuada. Habitasse Vivamus Pellentesque iaculis vel tempus a libero urna quis porttitor. Eget leo eget felis platea elit et ut porttitor velit risus. Porttitor Pellentesque platea eleifend laoreet tortor habitant nonummy malesuada metus Phasellus. Enim semper Aliquam magna tincidunt lacus ullamcorper porttitor ac Curabitur Nulla. Hendrerit tellus mauris In sit vel. </p>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt diam risus penatibus malesuada. Habitasse Vivamus Pellentesque iaculis vel tempus a libero urna quis porttitor. Eget leo eget felis platea elit et ut porttitor velit risus. Porttitor Pellentesque platea eleifend laoreet tortor habitant nonummy malesuada metus Phasellus. Enim semper Aliquam magna tincidunt lacus ullamcorper porttitor ac Curabitur Nulla. Hendrerit tellus mauris In sit vel. </p>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt diam risus penatibus malesuada. Habitasse Vivamus Pellentesque iaculis vel tempus a libero urna quis porttitor. Eget leo eget felis platea elit et ut porttitor velit risus. Porttitor Pellentesque platea eleifend laoreet tortor habitant nonummy malesuada metus Phasellus. Enim semper Aliquam magna tincidunt lacus ullamcorper porttitor ac Curabitur Nulla. Hendrerit tellus mauris In sit vel. </p>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt diam risus penatibus malesuada. Habitasse Vivamus Pellentesque iaculis vel tempus a libero urna quis porttitor. Eget leo eget felis platea elit et ut porttitor velit risus. Porttitor Pellentesque platea eleifend laoreet tortor habitant nonummy malesuada metus Phasellus. Enim semper Aliquam magna tincidunt lacus ullamcorper porttitor ac Curabitur Nulla. Hendrerit tellus mauris In sit vel. </p>
</BODY>
</HTML>
Pozn.: Pokud je nadřený objekt je pozicován relativně či abdolutně a jeho potomek je pozicován absoluteně, bude se pozice potomka vypočítávat "relativně" vůči předkovi.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title> </title>
<style type="text/css">
<!--
#a {width:500px;border:1PX SOLID RED}
#b {height:500px;border:1PX SOLID blue;width:400px;position:absolute;top:12px;left:20px}
//-->
</style>
</head>
<body>
<div id="a">
<div id="b">
<p>Lorem ipsum dolor sit amet consectetuer ut orci non quam tincidunt. Elit nunc eleifend ac auctor ipsum morbi volutpat vel lacinia massa. Morbi Aenean tellus vel felis at ut lacinia Maecenas penatibus enim. Leo ornare quis in pellentesque morbi tortor magnis risus elit condimentum. Adipiscing faucibus ridiculus ut Quisque eget adipiscing dui eget Suspendisse Vestibulum. Dignissim id sem lorem adipiscing nulla tristique. </p>
<p>Euismod sem congue faucibus tincidunt ante faucibus tincidunt id amet In. Donec pellentesque Vestibulum congue tempus tellus Curabitur semper pharetra quis nibh. Aliquet id tincidunt et aliquet pellentesque eu Aliquam tellus elit adipiscing. Nibh In mollis velit wisi adipiscing est amet id mauris est. Ut Nam accumsan elit urna mauris auctor. </p>
<p>Cursus Curabitur neque auctor tortor vitae dui quis risus nibh Morbi. Integer pharetra Phasellus est libero quis rutrum feugiat leo et justo. Aenean semper suscipit at Quisque Aenean lorem amet ac Nullam Vivamus. Eget a pretium sapien mi pretium semper Donec justo gravida Aenean. Dolor volutpat wisi Sed Nullam nunc quis in convallis elit vitae. Elit a at Lorem orci. </p>
<p>Vestibulum sagittis mauris et mattis tincidunt Nam tellus non dolor tellus. Vel rutrum mauris et orci et nec quis est eu metus. Ipsum fringilla venenatis Vestibulum justo semper ante cursus dui laoreet suscipit. Augue nibh nulla feugiat elit Lorem metus eget gravida id ligula. Ut Pellentesque sem Vestibulum Duis dolor magnis. </p>
</div>
</div>
</body>
</html>
V tomto případě se červený div neroztahuje podle velikosti svého obsahu, protože má absolutní pozici (plave na červeným). Postačuje tedy je následující úprava stylopisu:
#a {width:500px;border:1PX SOLID RED} #b {height:500px;border:1PX SOLID blue;width:400px;}
<style type="text/css">
<!--
.sc {display:block;height:600px;width:800px;border:1px solid black;color:gray;position:relative;margin:10px}
.sc div {display:block;height:100px;width:200px;border:5px solid black;margin:15Px;color:black}
#a {border-color:red;}
#b {border-color:blue;}
#c {border-color:green}
#d {border-color:purple}
#e {border-color:yellow}
#sc1 #a {float:right}
#sc1 #b {float:left}
#sc2 div {position:absolute}
#sc2 #a {top:20px;left:2px;background:darkred}
#sc2 #b {top:40px;left:10px;z-index:5;background:lightblue}
#sc2 #c {bottom:10px;right:2px;}
#sc2 #d {top:150px;left:140px}
#sc2 #e {right:-30px;top:4px;z-index:3}
#sc3 div {position:relative;margin:0}
#sc3 p {margin:5px;}
#sc3 #a {top:20px;left:2px;background:darkred}
#sc3 #b {top:40px;left:10px;z-index:5;background:lightblue}
#sc3 #c {bottom:10px;right:2px;}
#sc3 #d {top:150px;left:140px}
#sc3 #e {right:-30px;top:4px;z-index:3}
#sc4 div {position:static}
#sc4 #a {top:20px;left:2px;background:darkred;position:relative;}
#sc4 #b {top:40px;left:10px;z-index:5;background:lightblue;position:absolute}
#sc4 #c {top:10px;right:60px;position:relative}
//-->
</style>
</head>
<body>
<div class="sc" id="sc1">
<h1>Position:static </h1>
<p>Lorem ipsum dolor sit amet consectetuer dolor Nunc est adipiscing adipiscing. Nascetur mauris velit vitae vel Vivamus ac wisi et dui tincidunt. Ornare suscipit justo tempus ut Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing. </p>
<div id="a">float:right </div>
<div id="b">float:left </div>
<div id="c"> </div> empus ut Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing. </p>
<div id="d"> </div>
<div id="e"> </div> empus ut Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing. </p>
</div>
<div class="sc" id="sc2">
<h1>Position:absolute </h1>
<p>
empus ut Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing. </p>empus ut Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing. </p>empus ut Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing. </p>
<div id="a"> </div>
<div id="b"> </div>
<div id="c"> </div>
<div id="d"> </div>
<div id="e"> </div>
</div>
<div class="sc" id="sc3">
<h1>Position:relative </h1>
<p>Lorem ipsum dolor sit amet consectetuer dolor Nunc est adipiscing adipiscing. Nascetur mauris velit vitae vel Vivamus ac wisi et dui tincidunt. Ornare suscipit justo tempus ut <div id="a"> </div>Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing.
Lorem ipsum dolor sit amet consectetuer Nam Aenean orci congue Nulla. Nulla convallis tempus malesuada Ut lacinia pretium nunc lorem amet sed. Condimentum Suspendisse justo justo dui dapibus Integer at Morbi ligula Quisque. Et nibh tincidunt Mauris Lorem montes augue consequat amet fringilla vel. Turpis Nulla vel Suspendisse Curabitur condimentum ante non eros convallis Maecenas. Pretium dictum Vestibulum tempus.
Nunc sem Nullam pulvinar lacinia sapien fringilla euismod urna justo ipsum. Accumsan laoreet Vestibulum mus lorem pede id Nunc mauris dignissim ante. Nulla Sed sodales nibh Suspendisse sed nibh interdum commodo cursus Curabitur. Morbi ipsum Ut purus dui elit sem odio congue nibh dui. Laoreet adipiscing metus tempor magna orci venenatis vitae commodo sagittis dignissim. Justo justo id adipiscing ac.
Hendrerit tortor tincidunt risus habitasse mauris in Cras et eget Proin. Eget ac nunc nunc Suspendisse pellentesque sollicitudin eget Morbi tellus sit. Lacinia semper Morbi nibh tortor Vestibulum lacus pretium nibh consectetuer eleifend. Donec euismod mauris ante vitae leo orci quis In vel Sed. Eleifend Integer turpis Vestibulum lacinia aliquam laoreet.
Dictumst amet venenatis porta eu pellentesque fringilla velit pede sed suscipit. Natoque ullamcorper interdum Donec quis vel eu auctor adipiscing lacus nec. Sed malesuada et ac Phasellus condimentum Nunc pulvinar id Vestibulum mauris. Quis porttitor risus nibh cursus Lorem justo auctor nisl pede semper. Orci mauris vel et hendrerit odio gravida.
Sapien ligula elit gravida porttitor et dapibus Curabitur faucibus Nam ullamcorper. Quis sed orci vitae egestas turpis nibh elit volutpat id odio. Condimentum urna elit adipiscing lacus ligula pulvinar justo magnis faucibus ligula. Tellus pharetra mi Curabitur lacus id eget condimentum justo nibh nunc. Consequat habitasse molestie ante condimentum orci malesuada ante amet ipsum odio. Consectetuer sociis nibh Nullam tortor nibh nibh sed pulvinar orci laoreet. Quis.
Vestibulum turpis a amet at vitae Duis feugiat eu vel augue. Sit ante vitae condimentum tincidunt quis dui dui gravida lacinia Mauris. Sed nulla metus vitae massa orci velit mi elit quis ornare. Penatibus id congue Phasellus Aenean at Donec gravida tristique Curabitur quam. Neque justo cursus Nulla Nullam et tellus tellus lacus quis Donec. Et wisi aliquet nisl orci. <div id="b"> </div>
Tellus Cras Morbi nascetur quam a consequat egestas vitae justo Quisque. Cursus auctor pretium Nunc turpis Nunc Ut dolor mattis Praesent semper. Ridiculus Curabitur In Nam velit mi ligula metus justo sit porttitor. In Duis nulla vitae nec ut vitae Nam pellentesque dictum sapien. Tellus ante id netus fames at Aenean leo massa quis nunc. Ut laoreet a sed id augue condimentum lacinia ipsum adipiscing.
Lobortis eleifend orci nunc Ut sollicitudin convallis pellentesque vitae sem Proin. Ipsum lacus sem adipiscing pellentesque ligula leo risus tempus tincidunt In. Et eget velit nulla ut Vestibulum consectetuer Maecenas risus wisi sagittis. Et semper eu Integer senectus Sed feugiat facilisi lacus elit et. Quisque Pellentesque et condimentum justo platea. <div id="c"> </div>
A Cras Aenean tortor congue ut nunc gravida mollis sit nascetur. Curabitur et Quisque Mauris In adipiscing Aenean hac Nam Phasellus wisi. Magnis id lacinia lorem sodales faucibus et Vestibulum Morbi urna Quisque. Ipsum sem et elit eget Curabitur congue laoreet pellentesque Pellentesque at. Ut lacus eu dui et dictum leo nibh Aenean wisi vitae. Est eget velit elit tortor Aliquam Cras sed ligula Sed.
empus ut Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing. </p>
<div id="d"> </div>
empus ut Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing. </p><div id="e"> </div>
</div>
<div class="sc" id="sc4">
<h1>Position:absolute v relative </h1>
<div id="a">
<div id="b">
<div id="c">
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet consectetuer dolor Nunc est adipiscing adipiscing. Nascetur mauris velit vitae vel Vivamus ac wisi et dui tincidunt. Ornare suscipit justo tempus ut Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing.
empus ut Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing.
empus ut Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing. empus ut Vivamus interdum pretium vitae et Ut. Enim cursus adipiscing tincidunt Lorem Duis Nulla consectetuer amet Quisque consectetuer. Augue leo Quisque leo est adipiscing.Lorem ipsum dolor sit amet consectetuer dolor Nunc est adipiscing adipiscing. Nascetur mauris velit vitae vel Vivamus ac wisi et dui tincidunt. Ornare suscipit justo tempus ut
